Demo 6 :: Easing

JQuery can animate just about anything on a web page. It also does a very good job at animating the movements as well. One problem though is that it uses only one built in way to ease movements. This default easing is called swing. There is also an option that you can specify called linear. You are able to use plenty more easing options but you must download jQuery easing scripts to include in your webiste. You can find them here.

Click to view the swing ease!

Click to view the linear ease!

Click to view the easeOutElastic ease!

View the HTML code

<h2 id="swing">Click to view the swing ease!</h2>
<h2 id="linear">Click to view the linear ease!</h2>
<h2 id="elastic">Click to view the easeOutElastic ease!</h2>

View the jQuery code

$(document).ready(function(){
	$('#swing').toggle(function(){
		$(this).animate({'height': '+=100px'}, 2000, 'swing');
	}, function(){
		$(this).animate({'height': '-=100px'}, 2000, 'swing');
	});
	$('#linear').toggle(function(){
		$(this).animate({'height': '+=100px'}, 2000, 'linear');
	}, function(){
		$(this).animate({'height': '-=100px'}, 2000, 'linear');
	});
	$('#elastic').toggle(function(){
		$(this).animate({'height': '+=100px'}, 2000, 'easeOutElastic');
	}, function(){
		$(this).animate({'height': '-=100px'}, 2000, 'easeOutElastic');
	});
});