jQuery swap div on hover with delay

Question

Я пытаюсь создать две «кнопки», которые используют событие зависания, скрыть некоторые div и затем отобразить некоторые другие на их месте. Затем я пытаюсь отложить замену на div по умолчанию.

Все работает, отлично, если вы не переходите от одной кнопки к другой, в этот момент вы получаете много дисплеев одновременно, пока прохождение не пройдет. Если мы не используем задержку, она работает отлично.

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

}); 

Я предполагаю, что мне нужно сделать одну функцию парения в курсе другой, поэтому он может отменить тайм-аут, я просто понятия не имеют, как это сделать.

EDIT - только что забрал код, чтобы поместить все divs в одну прямую/шоу.

Кроме того, я должен был, вероятно, упомянуть, что #default, #servers и #hosting divs отображаются точно в одном месте. Поэтому необходимо мгновенно переключаться одновременно (что и было выше).

EDIT - последняя попытка использовать clearTimeout здесь http://jsfiddle.net/KH4tt/1/ - но не может заставить ее работать правильно.

Answer 1

Ok вот последняя вещь, использующая функцию clearTimeout(), чтобы отменить setTimeout(), который используется на mouseleave (hover handlerOut), который создает задержку:

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

}); 

Answer 2

Попробуйте что-то вроде этого

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

Answer 3

Вы можете использовать .delay() функцию в JQuery (я использую Jquery 1.7.1 версии), как на примере ниже:

$(selector).delay(1000).hide("slow");