（jQuery）.hover（）内のフェードイン/アウト要素の問題

Question

要素を上に置いたときに、.fadeIn()、.fadeOut()、および.hide()を正しく動作させることに問題があります。

私はコンテナを持っているとしましょう。.post-box

.post-boxには、.descriptionと.quoteという2つのdivが含まれています。 .quote divは最初は隠されていて、.post-boxが上に乗ると、.hide()で非表示になる.description divの代わりにフェードインします。

.post-boxがホバートしたとき、.quoteがフェードアウトし、.descriptionが再びフェードインします。

$(document).ready(function() { 
    var description = $('.description'); 
    var quote = $('.quote'); 
    var postBox = $('.post-box'); 

    postBox.hover(function() { 
     $(this).find(description).clearQueue().stop(true, true).hide(0, function() { 
      quote.fadeIn(300); 
     }); 
    }, function() { 
     $(this).find(quote).clearQueue().stop(true, true).fadeOut(300, function() { 
      description.fadeIn(300); 
     }); 
    }); 
}); 

1つの問題を除いて、このコンセプトはかなりうまく機能しているようです。すぐに.post-boxにカーソルを合わせてすばやくホバーオーバーしてすぐに上に戻ると、(see example screenshot here)と同時に表示されると.descriptionのdivが表示されます。

私は、私の機能がどのように設定されているかに基づいて、同時に発砲するのを妨げていると思っていましたが、これが起こるためには何か重要なことを見逃しているに違いありません。

Here is my fiddle so you can see it in action.

誰かが正しい方向に私をリードしていただけますか？

Answer 1

私の推測では、ホバー上のquote要素のアニメーションキューをクリアすることも考えられます。

$(this).find(quote).clearQueue().stop(true, true).hide(); 

I've updated the fiddle accordingly。