O'Reilly logo

jQuery UI 1.10: The User Interface Library for jQuery by Dan Wellman, Alex Libby

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Shaking an element

The shake effect is very similar to the bounce effect, but with the crucial difference of not having any built-in easing. So, the targeted element will shake the same distance for the specified number of times, instead of lessening each time (although it will come to a smooth stop at the end of the animation).

Let's change the previous example so that it uses the shake effect instead of the bounce effect. Change effectBounce.html so that it uses the shake.js source file instead of the bounce source file:

<script src="development-bundle/ui/jquery.ui.effect-shake.js"></script>

Then change the click-handler in the final <script> element at the bottom of the <body> element so that it appears as follows:

$("#ball").click(function() { ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required