Javascript 将鼠标快速移入/移出容器会导致不需要的jQuery动画

以下是我的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>

我想做的是，使

img meta

向下滑动，并使

meta图标在向下滑动后淡入

我能做到完美。但是，当我快速地将鼠标移入和移出容器时，我看不到任何向下滑动的效果。只有
元图标
一次又一次地淡入淡出，即我在容器上移动鼠标的次数

我最终实现了
.stop（）
，以避免它。但是，这并没有发生。任何人都可以解释这一点？
您可能需要使用jQuery.hoverIntent（）插件。HoverIntent会稍微延迟hover事件，因此只有当用户有意将鼠标悬停在目标上，而不是在页面上其他位置移动鼠标时，才会触发该事件
 这里看起来不错。您使用的jQuery版本是什么？另外，您正在使用
easeOutBounce
fx，它还需要jqueryui库。
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);  
    });