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

希望這能解決您的問題！