按鈕藏匿不正常

Question

HTML代碼：

<div id="slick-slidetoggle">wxyz</div>   
<div id="slickbox" >abcd</div>​ 

的JavaScript：

var hoverVariable=false; 
var hoverVariable2=false; 

$('#slickbox').hide(); 
$('#slick-slidetoggle').mouseover(function() { 
    hoverVariable2=true; 
    $('#slickbox').slideToggle(600); 
    return false; 
}) 
$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2=false; 
    setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){ 
    $('#slickbox').slideToggle(600); 
    return false;} 
    }, 1000); 
}) 
$('#slickbox').mouseleave(function() {      
    hoverVariable=false; 
    setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){      
    $('#slickbox').slideToggle(600); 
    return false;} 
    return false; 
    }, 1000); 
}) 
$('#slickbox').mouseover(function() { 
     hoverVariable2=false; 

    hoverVariable=true; 

})​ 

CSS代碼：

#slickbox { 
    background: black; 
    width:100px; 
    height: 135px; 
    display: none; 
    cursor:pointer; 
    color:white; 
} 
#slick-slidetoggle{ 
background: yellow; 
    width:100px; 
    height: 135px; 
    cursor:pointer; 
    color:black; 

} 
​ 

現在所期望的行爲是當鼠標在黃格幻燈片（「wxyz」）黑色div（「abcd」）應該滑落，如果鼠標移出黃色而不移動到黑色div，黑色div sho兩秒後隱藏。

發生這種情況。如果在移出黃色div後立即將鼠標移到黑色div上，只要鼠標位於黑色div上，黑色div就不應該隱藏。這也正在發生。

接下來的步驟有點難以解釋，但我會嘗試，當鼠標移動到黃色div和黑色div出來然後鼠標移動到黑色div和兩秒鐘之內，如果它移出它（黑色div）那麼整個動畫就會失靈。它的行爲是相反的。但是，如果鼠標在黑色div上保持兩秒鐘以上，然後將其移出，那麼整個腳本運行良好。

這是解釋更好的鏈接。 http://jsfiddle.net/HAQyK/381/

Answer 1

嘗試用適當的效果基本show（），並更換了slideDown的slideToggle（）（）調用。 http://jsfiddle.net/tppiotrowski/HAQyK/386/

var hoverVariable = false; 
var hoverVariable2 = false; 

$('#slickbox').hide(); 
$('#slick-slidetoggle').mouseover(function() { 
    hoverVariable2 = true; 
    $('#slickbox').slideDown(600); 
    return false; 
}) 
$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2 = false; 
    setTimeout(function() { 
     if (!hoverVariable && !hoverVariable2) { 
      $('#slickbox').slideUp(600); 
      return false; 
     } 
    }, 1000); 
}) 
$('#slickbox').mouseleave(function() { 
    hoverVariable = false; 
    setTimeout(function() { 
     if (!hoverVariable && !hoverVariable2) { 
      $('#slickbox').slideUp(600); 
      return false; 
     } 
     return false; 
    }, 1000); 
}) 
$('#slickbox').mouseover(function() { 
    hoverVariable2 = false; 
    hoverVariable = true; 
})​ 

Answer 2

您的問題似乎是由於您的重複超時功能，快速連續發射兩次的slideToggle。處理超時或間隔最徹底的方法是將它們存儲在一個變量來給你刪除它們控制在不需要的時候：

// Defined in global scope 
var timer; 

$('#slick-slidetoggle').mouseleave(function() { 
    hoverVariable2=false; 
    // Timer set as function 
    timer = setTimeout(function(){ 
    if(!hoverVariable && !hoverVariable2){ 
     $('#slickbox').slideToggle(600); 
     // Timer no longer need and so cleared 
     clearTimeout(timer); 
    return false;} 
}, 1000); 
}); 

編輯：忽視添加效果基本show /了slideDown，而不是切換爲根據上面的正確答案。請參閱更新的jsFiddle，它現在是正確的：http://jsfiddle.net/HAQyK/390/

另一種可以接近腳本的方法是使用jQuerys延遲功能和stop();動畫方法。包裝的div一個容器中，你得到的代碼更簡單的塊：

$('#slick-container').mouseenter(function() { 
    $('#slickbox').stop().slideDown(600); 
}).mouseleave(function(){   
    $('#slickbox').stop().delay(1000).slideUp(600); 
}); 

看看這裏：http://jsfiddle.net/HAQyK/387/

Answer 3

我重新編碼了一個解決方案。結帳小提琴here

 var hideB; 
     var $black = $('#slickbox'); 
     var $yellow = $('#slick-slidetoggle'); 

     function showBlack() { 
      if(hideB) window.clearTimeout(hideB); 
      $black.stop(true, true); 
      $black.slideDown(600); 
     } 

     function hideBlack() { 
      hideB = setTimeout(function() { 
       $black.stop(true, true); 
       $black.slideUp(600); } 
       , 1000); 
     } 

     $black.hide(); 

     $yellow.mouseenter(function() { 
      showBlack(); 
     }) 

     $yellow.mouseleave(function() { 
      hideBlack(); 
     }); 

     $black.mouseleave(function() { 
      hideBlack(); 
     }); 

     $black.mouseenter(function() { 
      showBlack(); 
     });