Question

I’m trying to create two “buttons” that using the hover event, hide some divs and then display some others in their place. I’m then trying to delay the swapping back to the default div.

All works, fine, unless you go from one button to the other at which point you get many divs displaying at the same time until the delay passes. If we don’t use the delay it works perfectly.

The javascript:

jQuery(function ($) {

$('#servers-btn').hover(
   function() {
    $('#servers, #servers-heading, #servers-arrow').show(0);
    $('#default, #default-heading').hide(0);
   }, 
   function() {
   setTimeout( function() {
        $('#servers, #servers-heading, #servers-arrow').hide(0);
        $('#default, #default-heading').show(0);
        },1000)
    }
);

$('#hosting-btn').hover(
   function() {
    $('#hosting, #hosting-heading, #hosting-arrow').show(0);
    $('#default, #default-heading').hide(0);
   }, 
   function() {
   setTimeout( function() {
        $('#hosting, #hosting-heading, #hosting-arrow').hide(0);
        $('#default, #default-heading').show(0);
        },1000)
    }
);

});

I assume i need to make one hover function aware of the other so it can cancel the timeout, i just have no clue how to do it.

EDIT – just tidyed up code to put all divs into one hide/show.

Also, i should have probably mentioned that the #default, #servers and #hosting divs appear in exactly the same location. So need to instantly switch at the same time (which the above does).

EDIT – latest attempt to use clearTimeout here http://jsfiddle.net/KH4tt/1/ – but can’t quite make it work right.

Answer 1

Ok here’s the final thing using the clearTimeout() function to cancel the setTimeout() that is used on mouseleave (hover handlerOut) that creates the delay:

jQuery(function($) {

var timeoutserver;

function canceltimeout() {
if (timeoutserver) {
    window.clearTimeout(timeoutserver);
    timeoutserver = null;
}
}

function closeServertime() {
    timeoutserver = window.setTimeout(function() {
        $('#servers, #servers-heading, #servers-arrow').hide(0);
        $('#default, #default-heading').show(0);
    }, 1000);        
}

function closeHostingtime() {
    timeoutserver = window.setTimeout(function() {
        $('#hosting, #hosting-heading, #hosting-arrow').hide(0);
        $('#default, #default-heading').show(0);
    }, 1000);        
}


$('#servers-btn').hover(

function() {
    canceltimeout();
    $('#servers, #servers-heading, #servers-arrow, ').show(0);
    $('#default, #default-heading, #hosting, #hosting-heading, #hosting-arrow').hide(0);
}, function() {
    closeServertime();
});

$('#hosting-btn').hover(

function() {
    canceltimeout();
    $('#hosting, #hosting-heading, #hosting-arrow').show(0);
    $('#default, #default-heading, #servers, #servers-heading, #servers-arrow').hide(0);
}, function() {
    closeHostingtime();
});

});