Bouncing
Another simple effect we can use with little configuration is the bounce effect. To see this effect in action change the contents of the <body> element in effectHighlight.html to the following:
<div id="ball"> <img src="img/ball.png"> </div>
We also need to use the source file for the bounce effect; change the reference to the jquery.ui.effect-highlight.js file, so that it points to the bounce.js source file:
<script src="development-bundle/ui/jquery.ui.effect-bounce.js"></script>
Save this as effectBounce.html. We need to add a tiny bit of styling to really see the effect in full, but it's probably not worth creating a whole new stylesheet so simply replace the <link> element in the <head> element of the page with the following:
<style>
#ball { position: relative; top: 150px; }
</style>Finally, change the final <script> element so that it appears as follows:
<script>
$(document).ready(function($){
$("#ball...
