Question

I am trying to implement a “shake animation” using jQuery. The idea is that you can make an element shake to draw attention to it. Below is what I came up with:

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

    }

I thought this was a little verbose and was wondering if anyone can see a more elegant way to achieve what I want.

Fiddle here.

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