jQueryアニメーション - 最初の実行後に一貫性がありません

Question

私はお互いに並んで浮かんでいる画像の一覧と、ページ上部のJavaScriptコールへのリンクを持っています。リンクをクリックすると、表示されているすべてのイメージが縮小して消え、選択したアイテムが展開されて表示されます。

これは初めて正常に動作します。しかし、その後の選択の変更は、フェージングが常に起こるわけではない、予測できない結果をもたらします。

私はjsFiddle exampleを作成しました。これは問題をよりよく示しています。どんな助けでも大歓迎です。

Chris。

Answer 1

問題は、アニメーションがコールバックと同様に個々の要素ごとに個別に実行されることです。したがって、showListは15回実行されています。

これを回避する方法の1つは、カウントを使用して最後のアニメーションがいつ実行されたかを追跡することです。たとえば：

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/