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

Framework: jQuery Listed in: Effects

That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!
jShaker

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

  1. Light-weight script
  2. Easy to integrate
  3. 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
That's right! For only $19.00 our team will help configure this script and integrate it into your website. We move fast and guarantee our work for full browser compatibility.
Get Started Now!

Julian Hurley

May 15, 2012

Would seriously appreciate a stop function…

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.

KV

May 17, 2011

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

i tried . but this cant stop.

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!

Suman

November 21, 2010

how about on mouseover?

Charles

July 7, 2010

Is their a way to stop the shaker???

Leave a comment

Your name

September 24, 2016

Spam protection. Enter result of expression you see in the box below.

8 + 10 =