<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="jQuery/jquery-1.4.2.min.js"> </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> <script type="text/javascript"> $(function(){ //Add bounce effect on Click of the DIV $('#bouncy1').click(function () { $(this).effect("bounce", { times:5 }, 300); }); $('#bouncy2').click(function () { $(this).effect("bounce", { direction:'left', times:5 }, 300); }); $('#bouncy3').click(function () { $(this).effect("bounce", { direction:'right', times:5 }, 300); }); $('#bouncy4').click(function () { $(this).effect("bounce", { direction:'down', times:5 }, 300); }); //Bounce all DIVs on click of button $("#bounceAll").click(function(){ $("div").click(); });// $('#resizeDiv')// .draggable()// .resizable(); $('#resizeDiv') .resizable({ start: function(e, ui) { alert('resizing started'); }, resize: function(e, ui) { }, stop: function(e, ui) { alert('resizing stopped'); } });}); </script> <style type="text/css"> div { padding:5px; width:150px; height:100px; text-align:center;}#bouncy1,#resizeDiv{ background-color:#FFEE88;}#bouncy2 { background-color:#EE88FF;}#bouncy3 { background-color:#EE8888;}#bouncy4 { background-color:#88EEFF;} </style></head><body> <form id="form1" runat="server"> <table><tr> <td><div id="bouncy1">Click here to bounce. Direction: Up</div></td> <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td></tr><tr> <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td> <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td></tr></table><br/><input id="bounceAll" type="button" value="Click to Bounce All!"/><hr />
</form> </body></html>