javascript - jQuery 动画 - 首次运行后不一致

Question

我有一个 float 的图片列表，页面顶部有一些指向 javascript 调用的链接。单击链接时，所有可见图像都应缩小并消失，然后所选元素会展开并变为可见。

这第一次工作正常。然而，选择的后续变化会产生不可预测的结果，而褪色并不总是发生。

我创建了一个 jsFiddle example哪个更好地说明了问题。非常感谢任何帮助。

克里斯。

Answer 1

问题是动画是在每个元素上单独运行的，回调也是如此。所以 showList 运行了 15 次。

解决此问题的一种方法是使用计数来跟踪最后一个动画运行的时间。例如:

function collapseList(selectedFilter) {
    var els = $('.listItem'),
        count = els.length;

    els.animate({
        opacity: 0,
        width: "0px",
        height: "0px"
    }, 2000, function() {
        if ( !--count ) {
          els.hide();
          showList(selectedFilter);
        }
    });
}

在这里试试:http://jsfiddle.net/msb9p/11/