setTimeOut method

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">
<div id="pageFooterTop"></div>
<!-- BEGIN PAGE FOOTER CONTENT -->
<div id="pageFooterContent">
</div>
<!-- END PAGE FOOTER CONTENT -->
</footer>
<!-- END PAGE FOOTER -->

---

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;
}

---

Code:

---

<script>
var timeoutId;
$('#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.

I found the answer:

Code:

---

var mnuTimeout = null;
$('#pageFooter').mouseenter(function(){
  clearTimeout(mnuTimeout);
  mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '250'}, 1000); },2000);
});
 
$('#pageFooter').mouseleave(function(){
  clearTimeout(mnuTimeout);
  mnuTimeout = setTimeout(function(){$('#pageFooterContent').animate({height: '0'}, 1000); },2000);
});

---

done