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() {
$(this).effect("shake", { direction: "up" }, 100);
});
Save this as effectShake.html
. This time we've made use of the direction
configuration option and the duration argument. The configuration option controls the direction...