Question

I have the following code:

$(document).ready(function () {

$("#full-btns").children().delay(4000).fadeOut("slow");

$('#full-btns').hover(function() {
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() {
        $("#full-btns").children().fadeOut("slow");

});

When the page is loaded, the #full-btns element is shown for 4000ms before fading out. The problem I have is that if a user hovers over the #full-btns element while its still visible, it causes it to fade out because $("#full-btns").children().fadeOut("slow"); is called on the hover. I want #full-btns to always be visible when hovering over it.

When the page loads, hover over the red div, notice how it fades out. That is undesirable. When hovering over the red div (while its visible) it should remain visible

Update:
http://jsfiddle.net/gazedge/nhBBc/ (now includes solution)

Answer 1

Use setInterval and clearInterval;

$('#full-btns').hover(function() {

      clearInterval(refreshIntervalId);        
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() { 
        $("#full-btns").children().fadeOut("slow");            
});

var refreshIntervalId = setInterval(function() {
     $("#full-btns").children().fadeOut("slow");
}, 4000);

​