jQuery - 鼠标悬停时的淡入淡出动画

Question

我有一个小的jQuery动画，当悬停在一个元素上时，它会淡入一个链接：

$(function() {
  $('.delete').hide();
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').fadeIn('fast');
  }, function() {
    $(this).parents('li').children('.delete').fadeOut('fast');
  });
});

但是，如果我快速地在图像内外移动鼠标，新的动画总是被添加到队列中，当我停止时，我可以看到链接在一段时间内闪烁。我尝试使用 .stop(true)，但有时淡入效果根本不起作用（或者只起到了小于1的某个不透明度值）。我该怎么办？

谢谢，Eric

- eWolf

Answer 1

最好的方法是使用hoverIntent插件。它可以解决上述问题，并且还会在动画中添加一个轻微的延迟，以便如果用户快速移动鼠标浮动在所有链接上，您不会得到所有链接的丑陋动画流。

- redsquare

Answer 2

防止这种问题发生的一种方法是在fadeTo()中使用stop()，如下所示：

$(function() {
  $('.delete').fadeTo(0, 0);
  $('#photos img').hover(function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 1);
  }, function() {
    $(this).parents('li').children('.delete').stop().fadeTo('fast', 0);
  });
});

希望这解决了您的问题！

- Donald Harvey