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 source file instead of the bounce source file:
<script type="text/javascript" src="development-bundle/ui/effects.shake.js"></script>
Then change the final <script>
appears like this:
<script type="text/javascript">
$(function() {
$("#ball").click(function() {
$(this).effect("shake", {direction:"up"}, 100);
});
});
</script>
Save this as effectShake.html
. This time, as well as changing the effect, we've also made use of one of the configuration options, direction
. This option...