javascript - jQuery:自定义水平 Accordion 宽度问题

Question

我正在尝试创建自定义水平 Accordion 式展示柜。就实际功能而言，我有框架(可以在这里看到):

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