[gilmeragency]

Hey! I appreciate the suggestion. I did use the delay() method before. That was one of my first ideas. But the problem is that the function "remembers" the mouseenter event no matter how quickly it happens. If I pass my mouse over the pageFooter div, the function just fires after 2000 ms, no matter where I may be on the page thereafter. The nightmare was when I was debugging and quickly passed my mouse back and forth over the pageFooter div like 8 times and then scrolled to the top of the page. The pageFooterContent was bouncing up and down as many times because the function was doing what I told it to do.

But I found the answer below:

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

Regarding the use of the stop() method, now that this is solved, is there any use for it? More clearly, whether it's the stop function or any other approach, do I need to to enhance what I have now? I mean, it does the job, but since I am kind of new to javaScript/jQuery, I want to consider as much as I have to in order to make things the best they can be.

Thanks everybody!