jQuery swap div懸停延遲

Question

我試圖創建兩個「按鈕」，使用懸停事件，隱藏一些divs，然後顯示一些其他人在他們的位置。然後我試圖延遲交換回默認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) 
    } 
); 

}); 

我想我需要做出一個懸停功能知道對方的存在，因此可以取消超時，我只是不知道如何做到這一點。

編輯 - 只是整理代碼，將所有的div放入一個隱藏/顯示。

此外，我應該可能提到#default，#servers和#hosting div顯示在完全相同的位置。所以需要在同一時間立即切換（以上所述）。

編輯 - 最新嘗試在這裏使用clearTimeout http://jsfiddle.net/KH4tt/1/ - 但不能使它正常工作。

Answer 1

好下面是使用clearTimeout（）函數取消在創建延遲的mouseleave（hover handlerOut）上使用的setTimeout（）的最後一件事：

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

您可以使用jQuery中的.delay（）函數（我使用jQuery 1.7.1版本），如下面的例子：

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