[rnd me]

I am trying to animate (increase) the height of the pageFooterContent div on mouseenter, and decrease it on mouseleave.

you can do that in css:

#pageFooter #pageFooterContent {
	     -o-transition-property:"height" ;
		   -moz-transition-property:"height" ;
		-webkit-transition-property:"height" ;
		        transition-property:"height" ;
	     -o-transition-duration:800ms ;
		   -moz-transition-duration:800ms ;
		-webkit-transition-duration:800ms ;
		        transition-duration:800ms ;
	     -o-transition-delay:500ms ;
		   -moz-transition-delay:500ms ;
		-webkit-transition-delay:500ms ;
		        transition-delay:500ms ;
	height		 : 0px ; 
}


#pageFooter:hover #pageFooterContent {
	     -o-transition-property:"height" ;
		   -moz-transition-property:"height" ;
		-webkit-transition-property:"height" ;
		        transition-property:"height" ;
	     -o-transition-duration:800ms ;
		   -moz-transition-duration:800ms ;
		-webkit-transition-duration:800ms ;
		        transition-duration:800ms ;
	     -o-transition-delay:500ms ;
		   -moz-transition-delay:500ms ;
		-webkit-transition-delay:500ms ;
		        transition-delay:500ms ;
	height		 : 250px ; 
}