Thread: Amazing Bounce Effect using jQuery framework

JavaScript bounce effect is the type of script presented on jsB@nk. com through many plained-JavaScript example codes, such as:

- J... detail at JavaScriptBank. com - 2.000+ free JavaScript codes

[IMG]hxxp ://w w w.javascriptbank. com/javascript.images/framework/amazing-bounce-effect-using-jquery-framework.jpg[/IMG]
Demo: JavaScript Amazing Bounce Effect using jQuery framework

How to setup

Step 1: Place CSS below in your HEAD section
CSS

Code:

<STYLE type="text/css">
body, input{
	font-family: Calibri, Arial;
}
div {
	padding:5px;
	width:150px;
	height:100px;
	text-align:center;
}
#bouncy1 {
	background-color:#FFEE88;
}
#bouncy2 {
	background-color:#EE88FF;
}
#bouncy3 {
	background-color:#EE8888;
}
#bouncy4 {
	background-color:#88EEFF;
}
</STYLE>

Step 2: Place JavaScript below in your HEAD section
JavaScript

Code:

<script type="text/javascript" src="hxxp ://ajax.googleapis. com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="hxxp ://ajax.googleapis. com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<SCRIPT>
$(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();
	});
});
</SCRIPT>

Step 3: Copy & Paste HTML code below in your BODY section
HTML

Code:

<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!"/>

JavaScript Line Graph script - JavaScript Virtual Keyboard - JavaScript Horizontal Slider