Question

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

抓取包含所选<li>。

<ul>

在容器（div.banner）
在'mouseenter'上，将课程.active添加到悬停的<li>
- 缩小其他<li>的宽度（原始宽度的一半）。
- 将活动<li>放大到新宽度（将其他人减半后的余数）
在'mouseleave'上，全部返回原始宽度。

正常工作，直到您快速滑过多个窗格。如果你这样做，那么浮动的<li>的最后一个会突破到下一行。看起来窗格的总宽度超过了它们的容器。

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

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(); 
    });

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

1 个答案: