Demo 4 :: Animations

A neat thing about jQuery is that it can animate CSS properties. Say you want a paragraph to grow. Or maybe you want a title to pop when a user mouses over it. JQuery allows you to make your web page flashier with CSS animations.

Mouse Over Me!

Did you take notice to this paragraph's font size grow when the page loaded? Pretty neat trick huh?

View the HTML code

<h2 id="mouseOver">Mouse Over Me!</h2>
<p>Did you take notice to this paragraph's font size grow when the page loaded? Pretty neat trick huh?</p>

View the jQuery code

$(document).ready(function(){
	$('#mouseOver').hover(function(){
		$(this).animate({bottom: '+=20px'}, 200);
	}, function(){
		$(this).animate({bottom: '-=20px'}, 200);
	});
	$('#mouseOver').next().animate({fontSize: '24px'}, 2000);
});