3

我有一个小 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）。我能做些什么？

谢谢，埃里克

4

2 回答 2

4

最好的方法是使用hoverIntent插件。这涉及到上述问题。它还为动画添加了轻微的延迟，因此如果用户碰巧将鼠标快速移动到所有链接上，您不会得到所有链接的丑陋动画流。

于 2009-08-02T14:35:15.733 回答
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);
  });
});

希望这能解决您的问题！

于 2009-08-02T14:45:35.640 回答