Back to Top

how to shake a div using jQuery

shake effect using jquery

Recently someone asked me that, I want that vibrate effect which you can see in some site as an 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 an 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 the element.shake effect moves an element horizontally or vertically using the argument passed in the effect call options.

CreativeDev

Syntax

effect('shake', options, speed);

options: Here we have three options:

  1. times: specifies times an element be shake
  2. distance :specifies the distance between element’s positions
  3. 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 continuously.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How do I add items in Top navigation bar?

Posted on 5 years ago

Bhumi

Table layout using DIV tags

Posted on 6 years ago

Bhumi

How to connect to MySQL database using PHP

Posted on 6 years ago

Bhumi

How To hide WordPress Toolbar

Posted on 2 years ago

Bhumi

How to Lock File in PHP

Posted on 7 years ago

Bhumi

Hello world

Updated 5 days ago

Nick Carter

In depth Understanding of Laravel Core

Updated 2 months ago

Bhumi

ECMAScript 6 New Features – 2

Updated 1 year ago

Bhumi

The Reader’s Poll – June 2015

Posted on 4 years ago

Bhumi

The Reader’s Poll – August 2014

Posted on 4 years ago

Bhumi

The Reader’s Poll – June 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – May 2014

Posted on 5 years ago

Bhumi

The Readers’ Poll – August 2013

Posted on 5 years ago

Bhumi