jQuery：自定義水平手風琴寬度問題

Question

我試圖創建一個定制水平手風琴風格的展示。 在實際功能方面，我有框架（可以在這里看到）：

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

然而，我的主要bug（和客戶端）是，如果你看右手邊，隨着寬度上下動畫，總會有輕微的移動/閃爍。

理想情況下，我希望它看起來平滑，所以只有開始/結束列表有移動。

任何建議將不勝感激。

一種。

Answer 1

使用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插件中使用了類似的方法。

Answer 2

你可以嘗試這個可能已經找出錯誤的插件 。 提供的示例太過華麗而無法實際講述。

你玩過jQuery UI緩動嗎？

Answer 3

您也可以嘗試在div打開時停止事件。

有解釋的網站是： http ： //api.jquery.com/stop/