In this third lesson I learned how to use the ".animate" function. This allows you to make elements move anywhere on the page.

For this example, I made the red square move 400 pixels to the right when it is clicked.

$(function() {
		
	$('#box').click(function() {
	
		$(this).animate({
			"left" : "300px"
		} , 4000);
	
		$(this).animate({
			"width" : "50px"
		} , 4000);
	});
				
});
			

Refresh the page to do it again.

You can see all the code by viewing the source of this page (Ctrl-U in most browsers).



Check out the video here.

www.channeleaton.com