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)。我能做什么?

谢谢你，埃里克

Answer 1

最好的方法是使用hoverIntent插件。这解决了上面的问题。它还会给动画增加一点延迟，所以如果用户碰巧将鼠标快速移动到所有链接上，您不会得到所有链接的丑陋动画流。

Answer 2

防止此类问题发生的一种方法是将stop()与fadeTo()结合使用，如以下代码片段所示：

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

希望这能解决你的问题！