jQuery動畫 - 第一次運行後不一致

Question

我有一個圖像列表，它們並排浮動，並在頁面頂部有一些JavaScript調用鏈接。點擊鏈接後，所有可見圖像都會縮小並消失，然後選定的項目會展開並變爲可見。

這工作正常，第一次。然而，隨後的選擇變化會導致不可預測的結果，而且衰落並不總是發生。

我創建了jsFiddle example，它更好地顯示了該問題。任何幫助非常感謝。

Chris。

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/