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

我在页面顶部有一个浮动在一起的图像列表，以及一些指向javascript调用的链接。单击链接后，所有可见图像应缩小并消失，然后选定的项目会展开并变得可见。

第一次工作正常。但是，选择的后续更改会产生不可预测的结果，并且褪色并不总是发生。

我创建了一个jsFiddle example，可以更好地显示问题。任何帮助都非常感谢。

克里斯。

最佳答案

问题是动画和回调一样分别在每个元素上运行。因此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/