1

ページにアイコンの行があり、ユーザーがカーソルを合わせたときに波のアニメーション効果を作成したいと考えています。

私は初心者のためにこの基本的なコードを使用しています:

$('#icons > li')
    .hover(function() {
        $(this).animate({
            'top': (-1 * hover_distance)
        }, hover_speed);
    }, function() {
        $(this).animate({
            'top': 0
        }, hover_speed);
    })
;

そして、それはOKに見えます。ただし、1 つの問題があります。カーソルを必死にアイコンの上に移動すると、すべてのアイコンのアニメーション キューが多くのアクション (上、下、上、下、上、下など) でいっぱいになり、アイコンが上に移動し、アイコンを操作するのをやめても、何度もダウンします。

アイコンが 1 サイクル (上下) だけ完了してからアニメーションを停止したい。このための最もエレガントな（短く、シンプルで、軽い）ソリューションを探しています。

PS: また、 stop()だけを使用することはできません。これは、「波の効果」を防ぐためです (つまり、カーソルをアイコン上で 1 回の速いストロークで移動すると、実際の波のように、それに応じてアイコンが上下に移動します)。

PPS: これが JS-Fiddle です: http://jsfiddle.net/nZqLy/3/

4

2 に答える 2

3

アニメーションの前に使用.stop()して、現在のアニメーションを停止したり.stop(true)、キュー内のすべてのアニメーションをキャンセルしたりできます。http://jsfiddle.net/nZqLy/9/

$('#icons > li').hover(function() {
  $(this).stop(true).animate({
    'top': (-1 * hover_distance)
  }, hover_speed);
}, function() {
  $(this).animate({
    'top': 0
  }, hover_speed);
});
于 2013-08-22T19:03:15.977 に答える
2

@jimjimmy1995 の回答に賛成票を投じましたが、同じアニメーションをより高速で効率的に行う別の方法を提供するためだけです。

$('#icons').on({
    mouseenter:function(){
        $(this).stop().animate({top:(-1*hover_distance)},hover_speed);
    },
    mouseleave:function(){
        $(this).stop().animate({top:0},hover_speed);
    }
},'li');

唯一の違いは次のとおりです。

  1. の使用.on()はより透過的ですが、拡張性も向上します (必要に応じて、後でイベントにさらに追加することができmousemoveます)。
  2. セレクターを作成するのではなく、すべてliから委任するということは、アニメーション バインディングが何度も適用されるのではなく、一度だけ適用されることを意味します (それぞれに 1 回) - これは 3 つの変更の中で最も重要です。#icons#icons > lili
  3. top文字列 ( vs )ではなくネイティブ DOM 名を使用することをお勧めします'top'。ハイフンでつながれていない単語には違いはありませんが、marginTopvsを扱い始める'margin-top'と違いが生じます。

アップデート

解決策を見つけました：

$('#icons').on({
    mouseenter:function(){
        if(!$(this).is(':animated')){
            $(this).animate({top:(-1*hover_distance)},hover_speed);
        }
    },
    mouseleave:function(){
        $(this).animate({top:0},hover_speed);
    }
},'li');

:animated セレクターを使用すると、アイテムがアニメーション化されているかどうかを確認できます。if ロジックは、そうでない場合にのみアニメーションを実行します。

それを証明するjsFiddle。

于 2013-08-22T19:11:01.147 に答える