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/