.stop(）会破坏渐变元，而黄色框不会'看起来不太合适

.stop() breaks the fadein and the yellow box doesn't appear proper

本文关键字：看起来 渐变 stop 黄色      更新时间：2023-11-09

如果我快速地将光标放在红框上，它只会停止淡入并将操作一分为二。如果我根本不使用.stop（）函数，jquery会尝试完成剩余的操作（我之前很快就悬停并退出了框）。有人知道我应该在这里做什么吗？谢谢

http://jsfiddle.net/dkLhC/1

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

JSFiddle

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

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

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

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

参见JSFiddle

Use.finish（）：

演示

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

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

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);
  });
});
相关文章：