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

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

希望这能解决您的问题！

jQuery - 悬停时淡化动画

2 个答案: