setTimeout Method

**gilmeragency** · Oct 14, 2012 00:48

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.

**Pullo** · Oct 14, 2012 04:51

Hi there,
With jQuery, you can use .delay() to achieve the desired effect.
This should do what you want (where the delay is in milliseconds):

Code JavaScript:

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

**gilmeragency** · Oct 14, 2012 12:26

Originally Posted by Pullo

Hi there,
With jQuery, you can use .delay() to achieve the desired effect.
This should do what you want (where the delay is in milliseconds):

Code JavaScript:

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

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. I have seen a timer used on something like this before. Check out the code below. I tried to modify this code to do what I wanted it to do, but I kept screwing it up. Remember, I am using animate versus hide/show, and versus slideUp/slideDown.

Code HTML:

<div id="NewsStrip">NewsStrip</div>
<div id="SeeAllEvents">SeeAllEvents</div>

Code CSS:

#NewsStrip {
    height: 80px;
    background: red;
}
#SeeAllEvents {
    height: 80px;
    background: gold;
}

Code javaScript:

$(function() {
    $("#SeeAllEvents").hide();
    var timeoutId;
    $("#NewsStrip").hover(function() {
        if (!timeoutId) {
            timeoutId = window.setTimeout(function() {
                timeoutId = null;
                $("#SeeAllEvents").slideDown('slow');
           }, 1000);
        }
    },
    function () {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            timeoutId = null;
        }
        else {
           $("#SeeAllEvents").slideUp('slow');
        }
    });
});

**Pullo** · Oct 14, 2012 13:48

Dude / dudette,

I iz sorry. It haz been a long day.
Try the following codes. They should work:

Code JavaScript:

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