How To 2 : Animating, Scrolling, and Resizing

Example 1 : Scrolling

The first Animation will demonstrate a basic scroll function. To the right , there's a little box. When a user scrolls the page down, that box will attach itself to the current pixel of it's location of the browser and follow the scroll events up and down. Lets look at the code. (This example comes from Tutsplus.com)

jQuery Code

//scroll script by By Jeff Dion //edited by Douglas Beard

var name = "#sideBox";  // create side box variable
var menuYloc = null;  //creating a null variable 
      
$(document).ready(function(){//starting an anonymous function  
 menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))//null intial valuse , 
     //grabs the current position of the element  
  $(window).scroll(function () { //begin scroll function  
    var offset = menuYloc+$(document).scrollTop()+"px"; // new offest variable that equals the scroll posisition 
     $(name).animate({top:offset},{duration : 3000 , easing:'easeOutBounce',queue:false}); //create animations for #sideBox 
     //modified code to have easing
   });//cloase scroll function
});//close anonymous function

The CSS

#sideBox {
	position:relative;
	width:90px;
	height:20px;
	border:1px dashed #FF0;
	background-color:#006;
	font-family:arial;
	font-weight:bold;
	font-size:12;
	padding:5px;
	color:#FFF;
	float:right;
	top:600px;
	margin:0 300px 0 0;
}

The html

<html>
<body>
<div id="sideBox">example 1</div>
page content
</body>
</html>

Working Example

The working example should be sitting nicely to the right of this sentence. As the page is scrolling the example box will follow the reactionary changes to how the user is scrolling.

Example 2 : Mouse Over Animation

In this quick module, the animation will be on a list items. This can be used for various different application but for now, a simple list will do. Let's look at the code.

jQuery code

$(document).ready(function(){ //start a new anonymous function
	 $('#list li').hover(function(){//creating a mouse hover event
		 $(this).stop(true).animate({opacity : '0.50'},'slow')//while hovered do this snimation
		 },//close first function
		    function(){//add a nother function for the mouse even 
			 $(this).stop(true).animate({opacity : '1'},'slow')//do this on mouseout
				});//close hover function
			});//close anonymous function

The Html

<html>
<body>
<ul id="list">
<li>Button one</li>
<li>Button two</li>
<li>Button Three</li>
</ul>
</body>
</html>

The CSS

#list li {
	cursor:pointer;
	font-family:arial;
	font-size:14px;
	padding: 10px 0 20px 10px;
	color:#FFF;
	list-style:none;
	height:30px;
       width:200px;
	margin:10px 0 0 0;
	font-weight:bold;
}

working code

Mouse over the button to see the working code

  • Button one
  • Button two
  • Button Three

Example 3 : Basic Animating

In this animation example, the idea is to get an item to move independently with one click function. Let's look at the code

The jQuery

//move div left and right
$(document).ready(function(){//start anonoymous function
	 $('.btnMove').click(function () {//creat a ckick function
	     if (!$('#boxOne').hasClass('Moved')) {//if #boxOne doesn't have class Moved proceed
			 $('#boxOne').animate({//start animation on #boxOne
			  left: '+100px'},//moving left 100 pixels
			  'slow').addClass('Moved');// animation speed is set to slow and class added is Moved
	     		 } else {// else begin this animate
		 $('#boxOne').animate({//begin animation on #boxOne
		 left: '0'//reseting the box to original position
		 }, 'slow').removeClass('Moved');// animation speed slow and remove class Moved
		 }//close  else
	});//close click function
 });//close anonymous function
                         

The Html

<a class="btnMove">Click me</a>
<div id="boxOne">This is a test</div>

The CSS

a.btnMove {
	width:150px;
	height:90px;
	padding:10px;
	background-color:#FF0;
	font-family:arial;
	color:#000;
	cursor:pointer;
}

#boxOne {
	width:200px;
	height:200px;
	background-color:#FF0;
	font-family:arial;
	color:#000;
	margin:20px 0 0 0;
	position:relative;
}

The Working Code

With the button pressed once the box moves tot he right, when pressing the button again the box moves left or to it's original position

Click me
This is a test