How to make an element shake every 5 seconds?

Question

I have an html with the following structure:

<li><a class="" href="?sort-by=popular">Barang Terpopuler</a></li>

How do I make this element shake (move left and right) every 5 seconds using jQuery? Is there a built in animation for this?

Answer 1

Try the following:

jQuery.fn.shake = function() {
    this.each(function(i) {
        $(this).css({
            "position" : "relative"
        });
        for (var x = 1; x <= 3; x++) {
            $(this).animate({
                left : -25
            }, 10).animate({
                left : 0
            }, 50).animate({
                left : 25
            }, 10).animate({
                left : 0
            }, 50);
        }
    });
    return this;
}
setInterval(function() {
    $('li').shake();
}, 5000); 

Fiddle