jQuery停止淡入淡出效果

Question

我需要的是一种类似于鼠标轨迹效果，当你将鼠标悬停在div上方或下方时会出现。但如果你快速地几次移动鼠标然后停止，效果会自行重复发生。

我该如何解决这个问题？我认为我需要某种类似于animate选项的de-queue功能，但适用于fadeTo函数。有什么好的想法吗？

$(".test").mouseover(function(e) {
  $(this).fadeTo(200, 1);
}).mouseout(function(e) {
  $(this).fadeTo(200, 0.3);
});

.test {
  padding: 5px;
  width: 200px;
  color: #ffffff;
  font-weight: bold;
  background: #000000;
  opacity: 0.3;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>
<div class='test'>asd</div>

- Bluemagica

---

也许可以参考：http://api.jquery.com/stop/ - Felix Kling

可能是如何在jQuery中停止效果的重复问题。 - bzlm

Answer 1

您可以使用.stop方法停止先前的动画。如果将true作为参数传递，则还会清除排队的动画。

如果我正确理解了您所要寻找的内容，那么您需要的是这个（您说希望有“鼠标轨迹”，我理解为不希望在鼠标离开元素后立即停止之前的动画，因此只需调用一次.stop）：

$(".test").mouseover(function(e){
    $(this).stop(true).fadeTo(200,1);
}).mouseout(function(e){
    $(this).fadeTo(200,0.3);
});

你可以在这里运行此处查看。

- James Allardice

Answer 2

正如您在标题中所描述的那样 :)

$(".test").mouseover(function(e){
    $(this).stop().fadeTo(200,1);
}).mouseout(function(e){
    $(this).stop().fadeTo(200,0.3);
});

- Andy

---

仅仅停止也会减少平滑的轨迹效果。 - Bluemagica

@aoi 我认为James Allardice的回答正是你想要的！ - Andy

Answer 3

添加.stop()以终止之前的动画：http://jsfiddle.net/sJFLq/5/

$(".test").mouseover(function(e){
    $(this).stop(true, true).fadeTo(200,1);
}).mouseout(function(e){
    $(this).stop(true, true).fadeTo(200,0.3);
});

- Samich

---

请确保将这两个参数设置为所需的停止状态。第一个参数会清除该对象的任何其他挂起动画，第二个则会跳到动画的结尾位置（通常需要将下一个动画正确定位）。通常情况下，您需要使用.stop(true, true)。两个参数的默认值均为false。有关更多信息，请参见http://api.jquery.com/stop/。 - jfriend00