How do I make a DIV vibrate or buzz? (similar to the iOS move/delete app feature)

Question

I'm working on a website that the user can customize and I'd like to make "vibrate/buzz" an element of the DOM (in my specific case it's a DIV). I'd like to obtain an effect similar to the one that happens on iOS when you long press any app icon (all the icons get shaky).

Searching on the web I just found this jQuery library: http://www.dev4web.eu/projects/jquery.vibrate/

But I'm not sure that I'll be able to obtain a nice effect using it.

Any ideas on how to implement this?

Thanks!

Answer 1

You could also implement your own animation like this:

function shake(){
    $('#div').animate({
        'margin-left': '-=5px',
        'margin-right': '+=5px'
    }, 200, function() {
        $('#div').animate({
            'margin-left': '+=5px',
            'margin-right': '-=5px'
        }, 200, function() {
            //and so on...
        });
    });
}

Answer 2

You could use a plugin such as jQuery Rumble: http://jackrugile.com/jrumble/

You could create your own using animate. As an example (To demonstrate how to shake the div):

<div id="div">
</div>

<input type="button" id="buzz" />

$("#buzz").click(function() {
   $("#div").animate({
    left: "20px",
   }, 50);

   $("#div").animate({
    left: "-20px",
   }, 50);

   $("#div").animate({
    left: "20px",
   },50);
});

http://jsfiddle.net/VRzc9/1/