Hi,

Relatively new to javaScript.

I tried to put a timer on the on the code below so the mouseenter event handler doesn't fire for a couple of seconds. I understand the abstract of the setTimeout method, but I cannot figure out how to incorporate it into this code. And I screw it up every time I try.

I am trying to animate (increase) the height of the pageFooterContent div on mouseenter, and decrease it on mouseleave. Here is the page on which I would like to do this http://galileedetroit.org/index2.php. Pertinent code is below. Any help would be greatly appreciated.

HTML

Code:
<!-- BEGIN PAGE FOOTER -->
<footer id="pageFooter">
<!-- BEGIN PAGE FOOTER CONTENT -->
<div id="pageFooterContent">
</div>
<!-- END PAGE FOOTER CONTENT -->
</footer>
<!-- END PAGE FOOTER -->
CSS

Code:
#pageFooter {
	width: 100%;
	background-color: #666;
    position: fixed;
	bottom: 0;
    /*height: 60px !important;*/
    z-index:100;
}

#pageFooterContent {
	width: 1100px;
	margin: 40px auto 0;
	background-color: #FFF;
}
JavaScript

Code:
<script>
$('#pageFooter').mouseenter(function() {
  $('#pageFooterContent').animate({
    height: '250'
  }, 1000, function() {
    // Animation complete.
  }); 
})

$('#pageFooter').mouseleave(function() {
  $('#pageFooterContent').animate({
    height: '0'
  }, 1000, function() {
    // Animation complete.
  });
})
</script>
Thank you.