jQuery 动画正在排队，即使使用了 .stop 参数

Question

由于某种我不太清楚的原因，即使我使用的是 stop 方法，我的动画也在排队。我尝试将其更改为停止（true，true），但它不起作用。我尝试过更改效果，但它也不起作用。

 $('.box').mouseenter(function() {
    $(this).stop().find(".box-overlay").fadeIn("normal");
 });
 $('.box').mouseleave(function() {
    $(this).stop().find(".box-overlay").fadeOut("normal");
 });

如果有人能教育我做错了什么，我将不胜感激？！

Answer 1

您应该在正在制作动画的元素上使用 .stop。

$('.box').mouseenter(function() {
   $(this).find(".box-overlay").stop().fadeIn("normal");
});
$('.box').mouseleave(function() {
   $(this).find(".box-overlay").stop().fadeOut("normal");
});

您可以将其简化为：

$('.box').on("mouseenter mouseleave", function(){
    $(this).find(".box-overlay").stop().fadeToggle("normal");
})

Answer 2

正如另一个答案所说，请确保您的目标是正确的元素.box-overlay。

您还可以使用悬停方法合并代码：

// mouseenter function
$('.box').hover(function() {
   $(this).find('.box-overlay').stop().fadeIn('normal');
// the next function is mouseleave
}, function () {
   $(this).find('.box-overlay').stop().fadeOut('normal');
});