jQuery: пользовательский вопрос ширины аккордеона

Question

Я пытаюсь создать собственную витрину в стиле аккордеона. С точки зрения реальной функциональности у меня есть структура (которую можно увидеть здесь):

http://www.jsfiddle.net/adrianjacob/UdUus/

Однако моя главная ошибка (и клиентов) заключается в том, что, если вы посмотрите на правую сторону, всегда есть небольшое движение / мерцание, когда ширина оживляет вверх и вниз.

В идеале я хочу, чтобы это выглядело плавно, поэтому движение может быть только у открывающих / закрывающих списков.

Любой совет будет высоко ценится.

A.

Answer 1

Используйте функцию animate step (это плохо документировано) ... Я обновил demo

var panels = $('#promo li');

panels.hoverIntent(

function() {
    if (!$(this).is('.expanded') && !panels.is(':animated')) {
        $(this).animate({
            width: 200
        }, {
            // width is the calculated width, ani is the animation object
            step: function(width, ani) {
                var w = Math.floor(width);
                // use 250 so we end up with 50 as the reduced size
                $('.expanded').css('width', (250 - w) + 'px');
                $(ani.elem).css('width', (200 - w) + 'px');
            },
            duration: 500,
            complete: function() {
                panels.removeClass('expanded');
                $(this).addClass('expanded');
            }
        });
    }
}, function() {});

Аналогичный методиспользуется в плагине Kwicks .

Answer 2

Вы также можете попытаться остановить событие только тогда, когда открывается div.

Сайт с объяснением: http://api.jquery.com/stop/

Answer 3

Вы можете попробовать этот плагин , который, возможно, обнаружил ошибку.Приведенный пример был слишком показателен, чтобы на самом деле сказать.

Играли ли вы с JQuery UI?