javascript - シェイク アニメーションを実装するより良い方法は?

Question

jQueryを使用して「シェイクアニメーション」を実装しようとしています。アイデアは、要素を振って注意を引くことができるということです。以下は私が思いついたものです：

    function DrawAttention(item, count)
    {
        $(item).animate({top: '+=5'}, 50,
            function(){
                $(item).animate({top: '-=10'}, 100,
                    function(){
                       $(item).animate({top: '+=5'}, 50,
                            function(){
                                if(count>0)
                                {
                                    DrawAttention(item,count-1);
                                }
                            }); 
                    });
            });

    }

これは少し冗長だと思い、私が望むものを達成するためのよりエレガントな方法を誰かが見ることができるかどうか疑問に思っていました.

ここでフィドル。

Answer 1

function DrawAttention(item, count)
{
    $(item)
        .animate({top: '+=5'}, 50)
        .animate({top: '-=10'}, 100)
        .animate({top: '+=5'}, 50, function(){
            if(count > 0){
              DrawAttention(item,count-1);
            }
        });
}

Answer 2

私の知る限り、jQuery Ui (jqueryui.com) にはこれに対する効果があります。これを試すことは代替手段になります。

これを自分で行いたい場合は、指数関数 (2^-x など) を使用してシェイク オフセットを計算します。