Jquery 动画宽度手风琴风格横幅

Question

我制作了这个简单的手风琴风格横幅。这是它应该做的：

• 抓取包含来自选定<ul> 的图像的<li>。
• 在容器内平均分配它们 (div.banner)
• 在“mouseenter”上，将类.active 添加到悬停的<li>
  • 缩小其他<li>s 宽度（原来宽度的一半）。
  • 将活动的<li> 扩大到新的宽度（其余部分减半后的剩余部分）
• 在“mouseleave”时，全部恢复到原始宽度。

在您快速滑过多个窗格之前​​工作正常。如果你这样做了，最后一个浮动的<li> 会跳到下一行。窗格的总宽度似乎超出了它们的容器。

动画时出现舍入错误？是否与 animate 的默认 'swing' 缓动有关？

小提琴：http://jsfiddle.net/UNFc4/

var banner = $('.banner');
var list_items = banner.find('li');
var banner_width = $(banner).width();
var num_of_images = $(banner).find('li').length;
var original_width = banner_width / num_of_images;
var half_width = (banner_width / num_of_images) / 2;

var init = function () {
    $(list_items).css('width', original_width);

    $(list_items).on('mouseenter', function () {
        $(this).addClass('active');
        doAnimation();

    });
    $(list_items).on('mouseleave', function () {
        resetAnimation();
        $(this).removeClass('active');
    });
}
var doAnimation = function () {
    $(list_items).not(".active").stop().animate({
        width: half_width + "px"
    }, 500);

    $(".active").stop().animate({
        width: (original_width + (half_width * (num_of_images - 1))) + "px"
    }, 500);
}
var resetAnimation = function () {
    $(list_items).stop().animate({
        width: original_width + "px"
    }, 500);
}
init();

我可以通过改变这条线来解决它，减慢其他线的动画，让事情有时间来平衡。但是，我宁愿解决这里发生的事情，希望能更多地了解 jQuery 的 animate() 是如何工作的。

 $(list_items).not(".active").stop().animate({
        width: half_width + "px"
    }, 480); // changed 500 to 480 

Answer 1

对于那些感兴趣的人，我意识到我只需要在横幅区域进行重置。现在它可以正常工作，如前所述，没有所有的抖动和随后的布局错位。

新小提琴：http://jsfiddle.net/UNFc4/1/

$(list_items).on('mouseenter', function () {
        $(this).addClass('active');
        doAnimation();
    });
    $(list_items).on('mouseleave', function () {
        $(this).removeClass('active');
        doAnimation();
    });
    $(banner).on('mouseleave', function () {
        resetAnimation(); 
    });