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>

这是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()。但是，这不会发生。有人可以解释吗？

最佳答案

您可能要使用jQuery .hoverIntent（）插件。 HoverIntent在悬停事件上稍有延迟，因此只有在用户有意将鼠标悬停在目标上而不是在将鼠标移动到页面上其他位置时无意间将鼠标悬停在目标上时才会触发。

关于javascript - 快速将鼠标移入/移出容器会导致不必要的jQuery动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19391244/