jQuery Shake Effect (jShaker) – jQuery plugin to create a shake or vibrate effect

jQuery Shake Effect (jShaker) - jQuery plugin to create a shake or vibrate effect

Framework: jQuery Listed in: Effects

Description

jShaker is a simple jQuery plugin which runs a shake, vibrate effect on a selected web page element and all its children emulating an shaker effect.

Why jShaker? Well, we added a new guy to the ajaxBlender team and one of his tasks was to create several sample jQuery plugins. The jShaker is one of them, but we don’t think the script will find a real use. (Actually we’d be surprised if you do. So, please share links with us.) We posted it, because it’s still a good little learning script.

Please note that the script will shake every children element of the parent running jShaker, and obviously the browser may slow down if there are a lot of nested elements, so be careful. ;)

Features

Light-weight script
Easy to integrate
Works with all modern browsers

How to Use

1.) Download jShaker script. The package already contains the jQuery framework.

2.) Add the following code to your <head>…</head> tag to connect the jQuery framework and the jShaker plugin. (Make sure your paths to the files are correct.)

<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jshaker.js" type="text/javascript"></script>

3.) jShaker plugin will extend the jQuery function so that you can call it on any element such as:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
   $('.block').click(function(){
       $(this).jshaker();
   });
});
// ]]></script>

That’s it ;) Click the Demo button to see it in action.

Browser Compatibility

Tested in:

MS Internet Explorer 6, 7, 8
Mozilla Firefox 2, 3
Opera
Google Chrome
Apple Safari

Leave a Comment

Charles

July 7, 2010

Is their a way to stop the shaker???

Suman

November 21, 2010

how about on mouseover?

Inigo

February 16, 2011

I find it sad and astonishing that developers spend so long building a great plugin like this only to negate any usefulness that people might have got from it by providing only the most tenuous documentation. As Charles said, is there no command to stop the animation? What use is this if there are no means to manipulate the animation- or if we are not told what those means are?

By not providing accessible, intelligible supporting documentation, sadly this is just another useless jQuery plugin from a developer who has wasted their own time as well as that of the people who might have been able to use this.

Ronier Lopez

April 19, 2011

Hey I don’t know if you still interested on this script but I’ve added the stop method :), you can use it like this :

$(”#your-shaking-element”).jshaker(); // to start the animation.

$(”#your-shaking-element”).jshaker.stop(); // to stop the animation :)

you can find it on https://github.com/ronier/jShaker

:) hope you find it useful.

See ya!

May 17, 2011

$(document).ready(function(){
$(’#block’).click(function(){
$(this).jshaker();
});
$(’#stop’).click(function(){
$(’#block’).jshaker.stop();
});
});

i tried . but this cant stop.

ajaxBlender.com

May 24, 2011

Hello, KV!
This plugin has been done just for fun and to share simple jQuery plugins creation experience. We have not added stop function to the plugin.

Napa Valley Engagement Photography

November 10, 2011

As Charles said, is there no command to stop the animation? What use is this if there are no means to manipulate the animation- or if we are not told what those means are?

jQuery Shake Effect (jShaker) - jQuery plugin to create a shake or vibrate effect