How to vibrate with jQuery

Add a vibrate effect with jQuery. Shake effect with jQuery.

We can add a vibrate effect using a piece of jQuery code.

In fact what it does is move the object with CSS using left and top styles.

Start creating fancy forms πŸ˜‰

Demo

View demo

Full Code

<!DOCTYPE html> <html lang="en"> <head> <title>Developer's Blog | Example 13</title> <meta charset="utf-8"> </head> <body> <div id="box"> <div id="container"> <div class="box" id="box1"> <p>Username<input type='text' size='20'></p> <p>Password<input type='text' size='20'></p> <p><input type='button' value='Submit' id='send'/></p> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function() { var interval = 10; var duration= 1000; var shake= 3; var vibrateIndex = 0; var selector = $('#box'); /* Your own container ID*/ $('#send').click( /* The button ID */ function(){ vibrateIndex = setInterval(vibrate, interval); setTimeout(stopVibration, duration); }); var vibrate = function(){ $(selector).stop(true,false) .css({position: 'relative', left: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px', //top: Math.round(Math.random() * shake) - ((shake + 1) / 2) +'px'}); top:0}); } var stopVibration = function() { clearInterval(vibrateIndex); $(selector).stop(true,false) .css({position: 'static', left: '0px', top: '0px'}); }; }); </script> <div style="margin-top:100px;"><a href="https://ricard.dev/?p=455" style="color:#03F;">Go back to Developer's Blog</a></div> </body> </html
2 comments
  • thanks mate, I’ve been looking for something like this all day. the closest solution i got was using the jquery ui provided shake effect. which is obviously an overkill regarding what a huge sized library i’ll have to include just to do something as small as this.

    You kinda saved my life! thanks a bunch again.

    Regards from turin, italy

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*