jQuery停止fadeTo效果

Question

我想要的是一种鼠标轨迹效果，当您将鼠标悬停在 div 上或下时。但是，如果您将鼠标悬停数次过快然后停止，效果会自行重复。

我该如何解决这个问题？我想我需要某种出队的东西，比如 animate 选项，但是对于 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>

Answer 1

您可以使用.stop 方法停止以前的动画。如果你传入true 作为参数，它也会清除队列中的动画。

如果我正确理解了您要查找的内容，那么您想要的是这个（您说您想要“鼠标轨迹”，我的意思是您不希望之前的动画停止一旦鼠标离开该元素，因此只有一次调用.stop)：

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

你可以看到运行here。

Answer 2

正如你在标题中描述的那样：)

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

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