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

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

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

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

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

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

A.


javascript jquery accordion
person Adi    schedule 17.12.2010    source источник
comment
Хм... сложный вопрос. Должна быть связана с ошибкой округления. У меня была игра с изменением ширины на % ages, но это бесполезно. Я продолжу и посмотрю, смогу ли я что-нибудь придумать.   -  person Nathan MacInnes    schedule 17.12.2010
comment
Также пробовал абсолютное позиционирование, но до сих пор не могу заставить его работать. Это расстраивает.   -  person Nathan MacInnes    schedule 17.12.2010

Ответы (3)


arrow_upward
1
arrow_downward

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

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.

person Mottie    schedule 17.12.2010
comment
+1 Еще немного дергается в Хроме, но почти незаметно! - person Shane Daniel; 18.12.2010
comment
Fudgey... Есть ли способ редактирования (jsfiddle.net/Mottie/UdUus/117), то есть все панели начинаются с одинаковой ширины, а затем плавно расширяются/сокращаются? - person Adi; 01.02.2011
comment
Это немного сложнее сделать, потому что вам придется вычислять и сохранять равномерно расширенные и сжатые размеры панелей. То, что вы просите сейчас, это именно то, что делает плагин Kwicks, так что могу ли я предложить вам попробовать его? - person Mottie; 03.02.2011

arrow_upward
0
arrow_downward

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

Вы играли с упрощениями пользовательского интерфейса jQuery?

person Shane Daniel    schedule 17.12.2010
comment
Этот плагин не очень хорошо работает, если вы изменяете размер экрана :( жаль, что он выглядит красиво! - person Mottie; 17.12.2010

arrow_upward
0
arrow_downward

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

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

person ferran87    schedule 17.12.2010