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

このような問題の発生を防ぐ 1 つの方法は、次のスニペットのように、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 に答える