.stop()打破了fadein,黄色框看起来不合适

时间:2013-11-27 21:47:17

标签: javascript jquery

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

http://jsfiddle.net/dkLhC/1

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

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

4 个答案:

答案 0 :(得分:3)

JSFiddle

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

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

答案 1 :(得分:2)

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

,而不是使用jQuery
.box2
{
    opacity: 0;
    transition: opacity 2s;
}

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

请参阅JSFiddle

答案 2 :(得分:0)

使用.finish()

DEMO

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

答案 3 :(得分:0)

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

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);
  });
});