setTimeout () Method

[liquorcode]

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.

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

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

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

Thanks so much.

 

[feherke]

Hi

As you use jQuery, better use its .delay() method instead :

$[teal]([/teal][green][i]'#pageFooter'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]mouseleave[/color][teal]([/teal][b]function[/b][teal]()[/teal] [teal]{[/teal]
  $[teal]([/teal][green][i]'#pageFooterContent'[/i][/green][teal])[/teal][highlight][teal].[/teal][COLOR=darkgoldenrod]delay[/color][teal]([/teal][purple]2000[/purple][teal])[/teal][/highlight][teal].[/teal][COLOR=darkgoldenrod]animate[/color][teal]([/teal][teal]{[/teal]
    height[teal]:[/teal] [green][i]'0'[/i][/green]
  [teal]}[/teal][teal],[/teal] [purple]1000[/purple][teal],[/teal] [b]function[/b][teal]()[/teal] [teal]{[/teal]
    [gray]// Animation complete.[/gray]
  [teal]}[/teal][teal]);[/teal]
[teal]}[/teal][teal])[/teal]

Feherke.
[link feherke.github.com/]

http://feherke.github.com/

[/url]

 

[liquorcode]

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

 

[Geates]

You could fire the delay on .mouseenter and then check the status of the mouse before animating ??

$('#pageFooter').mouseenter(function() {
  $('#pageFooterContent').delay(2000).mouseover(function() {
    $(this).animate({
      height: '0'
    }, 1000, function() {
    // Animation complete.
  });
})

-Geates