Question

如果我快速将红色框放在红色框上，将光标悬停在红色框上，它就会停止淡入并将操作分成两半。如果我根本不使用.stop（）函数，jquery会尝试完成剩余的操作（我徘徊并快速退出框）有人知道我应该在这做什么吗？感谢。

$(document).ready(function(){
  $(".box1").mouseenter(function(){

    $(".box2").stop().fadeIn();
  });
  $(".box1").mouseleave(function(){
    $(".box2").stop().fadeOut();
  });
});

Answer 1

JSFiddle

JQuery函数fadeTo()似乎也像css转换一样工作，但转换无疑是更好的选择。

$(document).ready(function(){
  $(".box1").mouseenter(function(){
    $(".box2").stop().fadeTo(1000, 1);
  });
  $(".box1").mouseleave(function(){
      $(".box2").stop().fadeTo(1000, 0);
  });
});

Answer 2

这不是您问题的直接答案，而是替代解决方案。您可以使用CSS transition来淡入淡出

，而不是使用jQuery

.box2
{
    opacity: 0;
    transition: opacity 2s;
}

.box1:hover + .box2 {
    opacity: 1;
    transition: opacity 2s;
}

请参阅JSFiddle

Answer 3

使用.finish()：

DEMO

$(document).ready(function(){
  $(".box1").mouseenter(function(){
    $(".box2").finish().fadeIn();
  });
  $(".box1").mouseleave(function(){
    $(".box2").finish().fadeOut();
  });
});

Answer 4

经过一番研究后，我发现正确的答案是

true, false（参数clearQueue, jumpToEnd）

<强> http://jsfiddle.net/q6d57/11/

$(document).ready(function(){
  $(".box1").mouseenter(function(){
    $('.box2').stop(true, false).fadeIn(3000);
  });
  $(".box1").mouseleave(function(){
    $('.box2').stop(true, false).fadeOut(3000);
  });
});

.stop（）打破了fadein，黄色框看起来不合适

4 个答案: