javascript - コンテナの内外でマウスをすばやく動かすと、不要な jQuery アニメーションが発生する

Question

ここに私のHTMLコードがあります:

<div class="img-meta">
        <div class="img-meta-link meta-icon"><a class='meta-link' href="#"><i class="icon-link"></i></a></div>
        <div class="img-meta-img meta-icon"><a class='meta-link' href="#"><i class="icon-picture"></i></a></div>
</div>

そして、ここにjQueryがあります

jQuery(".featured-thumb").hover(function() {
        jQuery('.img-meta').slideDown(600,'easeOutBounce', function() { 
            jQuery('.img-meta-link').css('margin-right','50px');
            jQuery('.img-meta-link').animate({'margin-right':'0px'},500);
        });
    },
        function() {
        jQuery('.img-meta-link').animate({'margin-right':'50px'},500);
        //jQuery('.img-meta-link').css('margin-right','50px');
        jQuery('.img-meta').fadeOut('fast');
        jQuery('.img-meta-link').stop(true,false);  
    }); 

私がやりたいのは、スライドダウンを作成しimg-meta、meta-iconスライドダウン後にフェードインすることです。

私はこれを完璧に行うことができます。しかし、マウスをコンテナの内外にすばやく移動しても、スライドダウン効果は見られません。ただ、meta-iconフェードインとフェードアウトを何度も繰り返す、いいえ。何度もマウスをコンテナの上に移動しました。

.stop()それを避けるために、最後に実装しました。しかし、そうはなりません。誰でもこれを説明できますか？