Question

我试图创建一个自定义水平手风琴风格的展示。在实际功能方面，我有框架（可以在这里看到）：

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

然而，我的主要虫子（和客户）是，如果你看右手边，随着宽度上下动画，总会有轻微的移动/闪烁。

理想情况下，我希望它显得平滑，因此只有开场/结束列表才有动作。

非常感谢任何建议。

一个。

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

您可以尝试this plugin，这可能已经找出了错误。提供的示例太过华丽，无法实际讲述。

你玩过jQuery UI缓动吗？

Answer 3

您也可以尝试在div打开时停止事件。

有解释的网站是：http://api.jquery.com/stop/

jQuery：自定义水平手风琴宽度问题

3 个答案: