Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Shake Things Up Using jQuery UI’s Shake Effect

By David Walsh on June 23, 2009

Yesterday I created a tutorial showing you how you can shake an element using Fx.Shake, a MooTools component written by Aaron Newton. It turns out that jQuery UI also has a shake effect which can draw attention to an element.

View Demo

The XHTML

<div id="shaker">
<a href="https://davidwalsh.name"><img src="/demo/mootools-shake.png" alt="David Walsh Blog" /></a>
</div>

Exactly the same as my MooTools method.

The CSS

#shaker		{ position:fixed; top:10px; right:10px; width:299px; height:253px; display:none; }

Also exactly the same as my MooTools method.

The jQuery JavaScript

function periodical() {
	$('#shaker').effect('shake', { times:3 }, 200);
}
$(document).ready(function() {
	$('#shaker').hide().css('display','').fadeIn(600);
	var shake = setInterval(periodical, 5000);
	
	/* updated: click clear */
	$('#shaker').click(function() {
		clearInterval(shake);
	})	
});

The code is basically the exact same logic ported into jQuery's syntax and methodology. Remember that you need jQuery UI to do this.

View Demo

What I loved about creating these tutorial was that these are perfect examples of how flexible these two libraries are. They both allowed me to create the same functionality in very little code. People shouldn't focus on "jQuery against MooTools," people should focus on "jQuery or MooTools."

Update: Click Clear

I added clearing the interval (and thus stop the shaking) once the user has clicked on the element.

Recent Features

By David WalshDecember 23, 2011
CSS Filters
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...
By Soledad PenadésJuly 22, 2014
From Webcam to Animated GIF: the Secret Behind chat.meatspac.es!
My team mate Edna Piranha is not only an awesome hacker; she's also a fantastic philosopher! Communication and online interactions is a subject that has kept her mind busy for a long time, and it has also resulted in a bunch of interesting experimental projects...

Incredible Demos

By David WalshJune 29, 2009
Highlighter: A MooTools Search & Highlight Plugin
Searching within the page is a major browser functionality, but what if we could code a search box in JavaScript that would do the same thing? I set out to do that using MooTools and ended up with a pretty decent solution. The MooTools JavaScript Class The...
By David WalshMarch 27, 2013
Detect Pseudo-Element Animation Support
A while back I posted an interesting tidbit from Daniel Buchner which allows developers to detect DOM node insertions with JavaScript and CSS animations; an awesome trick driven by CSS animations. Lea Verou recently posted another detection snippet driven by CSS animations: detecting pseudo-element...

Discussion

Mohamed Jama
nice work, but in the demo instead of just shaking its moving horizontally to the left side of the page shakes and then goes back to write side of the page, i am using Safari.

Good work though :)
Ronny-André Bendiksen
I get the same result Mohamed gets. The actual shaking happens in the left corner in Safari 4.0
David Walsh
Whoa…Safari is acting weird. I’ll check that out a bit later. I’m guessing the absolute positioning used in the jQuery plugin is messing with it. I may need to create a container and make that relative.
Eric Roberts
Don’t forget a return: false; for the click if you don’t actually want the user to be redirected anywhere (or for that silly # sign to show up) :-)

Great quick tip, David. I’m sure a use for this will pop up for myself sometime.
Jasminka
Very nice effect;-)…Hello David! First of all I would like to thank you very much for all yours tutorials that you are kindly sharing ..they are very actual and helpful for novice like me..:-))… Thanks to you I found many interesting information..like Jquery.. I began to study..I would like to ask you as a professional.. if I will use for example Jquery plug-ins in my website project.. can it be attacked?.. as for example sql injection ? Thank you in advance.. ;-)
Michael David
I just saw that my favorite CMS (Umbraco) had implemented it on the admin login form. I couldn’t figure out how they were doing it but I saw your posting on using Jquery Shake and sure enough they’re using the same code.

Thanks for the lesson and all your other tips!
wetwetwafu
now i can clone the mac login box error to my web forms.. :D

thanks
Delphi
It seems to be acting up in Safari and Chrome. I tried the relative container and that didn’t seem to work. Did you ever figure this issue out?