jQuery Shake Effect Explained

by Bhumi // Jan 30,2013 // No comment

Recently someone asked me that, I want that vibrate effect which you can see in some site as advertisement. In some site, advertisement comes with vibrate/shake effect so which highlight it or a way to direct attention to that advertisement banner.

So Today I am going to explain how to vibrate or shake a advertisement banner using jquery.jQuery provide shake effect which we can use for our purpose.

First of all,Let’s create one div with id shake which is used as element.shake effect moves an element horizontally or vertically using the argument passed in the effect call options.


<div id="shake" style="width: 300px; height: 100px; background-color:#C91622;color:#fff;">CreativeDev</div>

1 2	<div id="shake" style="width: 300px; height: 100px; background-color:#C91622;color:#fff;">CreativeDev</div>

Syntax


effect('shake', options, speed);

1 2	effect('shake', options, speed);

options: Here we have three options:

times: specifies times an element be shake
distance :specifies the distance between element’s positions
direction: specifies the direction of the shaking effect (horizontal or vertical) speed:is a time length in milliseconds.

Let’s understand code using jQuery shake.Here I have called shake id 3 times in every 500 ms so its vibrate continuosly.


function interval() {
  $('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {  
  var shake = setInterval(interval, 500);    
});

function interval() {

$('#shake').effect('shake', { times:3 }, 100);

}

$(document).ready(function() {

var shake = setInterval(interval, 500);

});

Keep in mind: Don’t forget to load latest version of jquery to effect get work.

DEMO

View Demo

Hope this post will helpful for you, waiting for your responses.Thanks for reading and feel free to share your thoughts! Don’t Forget to Follow us on Twitter or Subscribe us to Get the Latest Updates.

Solution:Uncaught ReferenceError $ is not defined in WordPress

As you all know, new version of WordPress (3.5) includes its own version of jquery, which has been rigorously tested with WP and many of READ MORE

To read JSON data with jQuery

In this short and informative post, I am going to explain how to parse the JSON string using jQuery. JSON stands for a JavaScript Object READ MORE

jQuery Cookie Explained

jQuery provides a plugin which you can use with the jQuery library itself and you can easily store and access cookies. Before we begin, lets READ MORE

JQuery Animation Explained

jQuery is a JavaScript framework which intends to easily develope interactive web sites and user interfaces with a few lines of code.jQuery animate is quite READ MORE