tutorial #2: easing

Easing functions are based on algorithm that can accelerate and slow the speed of specific animated effects. The effects that we will use are Linear and Swing.

(Please Note: For the Easing to work, it will need jquery.easing.1.3.js. For more information about jQuery easing, visit: gsgd.co.uk/sandbox/jquery/easing)

For this demonstration, you will learn how to create an easing effect. You will learn how to build the jQuery code needed and learn the purpose of each line, also, how to create the elements needed for the easing effect in HTML and CSS.

Below is a demonstration of Easing. Click on the first blue box to see it increase in size, click on it again to see decrease in size.

Click Here

Do Not Click Here

The How-To

HTML

<section>        

      <p>Click Here</p>

</section>

<section>

      <p>Do Not Click Here</p>

</section>

<section>

  <p>Do Not Click Here</p>
  
</section>

CSS


section {
	background:#2B83A8;
	width:1024px;
	height:50px;
	margin-bottom:20px;
}

section p {
	color:#FFFFFF;
	margin:20px auto;
}

jQuery

                
                
$(document).ready(function(){
//Will make the document ready.
$('section:first').toggle(function() {
//The selector will only use the first child of the section tags, 
//then the function will active a toggle.
$(this).animate( {'height':'+=250px'}, 1000, 'linear')
//"this" will active the event handler when the user clicks on the element.
Inside the braces, the event handler will make the height of the element increase. To grow the element use '+='.  the "1000" is in milseconds and the effect is set at 'linear'.
}, function() {
$(this).animate( {'height':'-=250px'}, 1000, 'swing');
//The same as above, only you decrease the element's height by using '-='.
Also, changing the effect to 'swing'.
});
});//Close.