jquery懸停優先和clearTimeout問題

Question

所以我試圖做一個在我的網站上的購物車下拉，http://www.beautracare.com/，到目前爲止，如果我把鼠標放在購物車上，你會得到一個下拉淡入，但一段時間後超時即使您仍然對購物車下拉菜單感興趣，也會淡化。我嘗試創建一個setTimeout並在鼠標懸停在下拉菜單上時將其清除，但它沒有響應。我也嘗試過使用Jquery中的下拉懸停功能，但它看起來不像它的觸發。請幫忙，謝謝。 jQuery代碼如下：

jQuery(document).ready(function() { 
    var timer; 
    //get all link with class panel 
    $('a.panel').click(function() { 

       //reset and highlight the clicked link 
     $('a.panel').removeClass('selected'); 
     $(this).addClass('selected'); 

     //grab the current item, to be used in resize function 
     current = $(this); 

       //scroll it to the destination 
     $('#wrapper').scrollTo($(this).attr('href'), 800);  

       //cancel the link default behavior 
     return false; 
    }); 

    $('.wsite-nav-cart').hover(
     function() { 
      if ($("#wsite-mini-cart").css("display") == 'none'){ 
       $("#wsite-mini-cart").fadeIn(); 
       timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500); 
      } 
     }, function() { 
     } 
    ); 

    $("#wsite-mini-cart").hover(
     function() { 
      if (timer) { 
       window.clearTimeout(timer); 
      } 
      $("#wsite-mini-cart").css({'display':'block','opacity':1}); 
     }, function() { 
      timer = window.setTimeout(function() {$("#wsite-mini-cart").fadeOut(); }, 1500); 
     } 
    ); 


    $('.wsite-nav-cart').click(function() { 
     if ($(this).attr("id")){ 
      $("#wsite-mini-cart").fadeOut(); 
      $(this).removeAttr('id'); 
     } else { 
      $("#wsite-mini-cart").fadeIn(); 
      $(this).attr('id', 'active'); 
     } 
     //cancel the link default behavior 
     return false; 
    }); 

Answer 1

我做了一點jsfiddle來說明我將如何解決這個問題。如果您將鼠標懸停在按鈕上，購物車就會出現。如果您將鼠標移出按鈕，購物車將隱藏。但是如果你移動到購物車上，它會保持可見狀態，直到你離開它。

基本上，hideCart延遲500ms。如果任何綁定元素在此期間收到鼠標懸停，則取消該定時器。

代碼：

var hideTimer; 

function showCart() { 
    $("#mini-cart").fadeIn(1000); 
    if (hideTimer) { 
     window.clearTimeout(hideTimer); 
     hideTimer = null; 
    } 
} 

function hideCart() { 
    hideTimer = window.setTimeout(function() { 
     $("#mini-cart").fadeOut(1000); 
    }, 500); 
} 

$("#nav-cart,#mini-cart").hover(showCart, hideCart);