jQuery 停止 fadeTo 效果

Question

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

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