JavaScript / jQuery Tutorial Demo 1

Demo 1 - Bounce Effect on any element

Use jQueryUI to animate some list items using a continual bounce effect.

REMEMBER: You have to download and add jQuery and jquery-ui plugins
  <script> tags before the closing body tag to get these to work.
	
<!-- HTML -->

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript / jQuery Tutorial Demo 1
<link rel="stylesheet" type="text/css" href="styles/styles.css">
</head>
<body>


	<div class="demo">
		<nav>
			<ul>
				<li>List Item 1</li>
				<li>List Item 2</li>
				<li>List Item 3</li>
				<li>List Item 4</li>
				<li>List Item 5</li>
			</ul>
		</nav>
	</div>

<!-- Important for you to go to jQuery UI and download the plugin for the bounce effect for this one -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="scripts/script.js">
</body>
</html>

	
/* CSS include in the head section or create styles/styles.css
   and include a <style> tag as shown in the html above */

.demo {
	padding:20px;
	font-size:20px;
	background-color:#FFBBBC;
}

.demo nav{
	margin:40px;
}

.demo ul li{
	line-height:1.8;
	padding:5px;
	width:150px;
	background-color:#FF686C;
}

	
// JavaScript Document - include this in your src="scripts/script.js file

var $li = $('.demo nav ul li');

var $li01 = $li.eq(0);
var $li02 = $li.eq(1);
var $li03 = $li.eq(2);
var $li04 = $li.eq(3);
var $li05 = $li.eq(4);
var $li06 = $li.eq(5);

upDown();

function upDown(){
	var ranNum = (Math.random()*10000)+5000;
	console.log(ranNum);
	$li01.effect("bounce", ranNum, upDown);
	$li02.effect("bounce", ranNum*1.3, upDown);
	$li03.effect("bounce", ranNum*1.5, upDown);
	$li04.effect("bounce", ranNum*1.85, upDown);
	$li05.effect("bounce", ranNum*2.25, upDown);
	$li06.effect("bounce", ranNum*2.75, upDown);
}
	

The HTML and the CSS is not complex. 
The jQuery here is grabbing all the li elements into the $li variable.
Then the upDown function operates using a random number and applies this 
to the individual $li01, $li02, etc. elements along with an increasing 
factor. This changes the distance of the bounce. The final parameter is 
a callback to keep the effect running.