I have a page with a header and footer that are in fixed positions. The footer also is partially hidden using a negative number with bottom property.

I would like the footer to move up to its full height using .animate.

This is the CSS I am currently using
Code:
#footer {
	position: fixed;
	width: 100%;
	height: 113px;
	bottom: -56px; 
	background: rgba(75, 85, 87, 1.00);
	display: block;
}

#footer:hover {
	bottom: 0; 
}
and here is the JQuery code I am using
Code:
$(document).ready(function(){
	$("#footer").hover(function(){
		$("div").animate({bottom:'0'}, 500);
	});
});
The CSS works. On mouseover the footer div moves up and fully displays, but I would like the animation to happen a little slower and not just jump into place.

I put the javascript together after reading several articles on WC3 Schools website about JQuery .animate function. I am not even sure the code or syntax is correct. Any help would be appreciated. Also feel free just to point me in the right direction.

Thank you.