將鼠標懸停在div上會觸發div，如果徘徊在

上我會有這個div，當它被擱置時，它會激活這個其他div。當用戶在激活的div上移動鼠標時，我希望該div保持不變。這是一個片段。將鼠標懸停在div上會觸發div，如果徘徊在

當您將鼠標懸停在金盒上時，紫色框隱藏並顯示灰色框。當鼠標移動到灰色框上時，我希望灰色框保持不動。然後當鼠標第二次懸停在金色盒子上時，灰色盒子會隱藏起來，紫色會回來。我如何在Jquery中使用流暢的動畫來做到這一點？

$(function() { 
 
    $("#startMenu").hide(); 
 
    var timeoutId; 
 
    $("#menuDesktop").hover(function() { 
 
     if (!timeoutId) { 
 
     timeoutId = window.setTimeout(function() { 
 
      timeoutId = null; 
 
      $("#topBarDesktop").slideUp('400'); 
 
      $("#startMenu").slideDown('1000'); 
 
     }, 400); 
 
     } 
 
    }, 
 
    function() { 
 
     if (timeoutId) { 
 
     window.clearTimeout(timeoutId); 
 
     timeoutId = null; 
 

 
     } else { 
 
     $("#startMenu").slideUp('slow'); 
 
     $("#topBarDesktop").slideDown('400'); 
 
     } 
 
    }); 
 
});

#topBarDesktop { 
 
    position: fixed; 
 
    top: -.1em; 
 
    right: -1em; 
 
    padding: 20px 100%; 
 
    background: purple; 
 
} 
 
#menuDesktop { 
 
    width: 50px; 
 
    position: absolute; 
 
    height: 50px; 
 
    background: gold; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    float: left; 
 
    left: -15px; 
 
    top: -15px; 
 
} 
 
#menuDesktop:hover { 
 
    background: red; 
 
} 
 
#startMenu { 
 
    background: grey; 
 
    padding: 100% 100%; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="topBarDesktop"> 
 

 
</div> 
 
<div id="menuDesktop"> 
 

 
</div> 
 
<div id="startMenu"> 
 

 
</div>

來源

2016-07-26 Ackados

使用[$（「＃開始菜單」）的slideToggle（ '1000'）;（ http://api.jquery.com/slidetoggle/）在懸停事件中，這樣它將保持打開，直到你再次懸停$（「＃menuDesktop」）。 –

你可以改變你的else並else if，以檢查是否#startMenu懸停或沒有。然後，您還只需要確保在#menuDesktop和#startMenu之間撥打.hover()，以便當您將鼠標懸停在#startMenu之外時，它也會滑回原位。

$("#menuDesktop, #startMenu").hover(function() { //Added #startMenu to selector 
    if (!timeoutId) { 
    timeoutId = window.setTimeout(function() { 
     timeoutId = null; 
     $("#topBarDesktop").slideUp('400'); 
     $("#startMenu").slideDown('1000'); 
    }, 400); 
    } 
}, function() { 
    if (timeoutId) { 
    window.clearTimeout(timeoutId); 
    timeoutId = null; 
    } else if ($("#startMenu:not(:hover)").length && $("#menuDesktop:not(:hover)").length) { //Checks that neither #startMenu or #menuDesktop is hovered on. 
    $("#startMenu").slideUp('slow'); 
    $("#topBarDesktop").slideDown('400'); 
    } 
});

看看這個工作fiddle

來源

2016-07-26 20:00:48 digglemister

謝謝！這幾乎可以工作，除了當鼠標再次懸停在金盒上時，我希望它切換回去。編號雖然當我離開頁面。 – Ackados

我在else if語句的末尾添加了這個，爲什麼它不起作用？ '&& $（'＃menuDesktopBtnClose'）。長度' – Ackados

我添加了幾行Kld腳本

$(function() { 
    $("#startMenu").hide(); 
    var timeoutId; 
    $("#menuDesktop").hover(function() { 
    $("#menuDesktop").css("background", "red"); 
     if (!timeoutId) { 
     timeoutId = window.setTimeout(function() { 
      timeoutId = null; 
      $("#topBarDesktop").stop(true, true).slideUp('400'); 
      $("#startMenu").stop(true, true).slideDown('1000'); 
     }, 400); 
     } 
    }, 
    function() { 
     if (timeoutId) { 
     window.clearTimeout(timeoutId); 
     timeoutId = null; 

     } else { 
     $("#startMenu").stop(true, true).slideUp('slow'); 
     $("#topBarDesktop").slideDown('400'); 
     $("#menuDesktop").css("background", "gold"); 
     } 
    }); 

    $("#startMenu").hover(function(){ 
    $(this).stop(); 
     $("#topBarDesktop").stop(true, true); 
     $("#menuDesktop").css("background", "red"); 
    }, function(){ 
    $("#startMenu").stop(true, true).slideUp('slow'); 
    $("#topBarDesktop").slideDown('400'); 
    $("#menuDesktop").css("background", "gold"); 
    })  
});

來源

2016-07-26 20:17:40

謝謝！當鼠標從金盒快速移動到灰色時，你能否讓灰盒不會消失？ – Ackados

代碼已更新 –

將鼠標懸停在div上會觸發div，如果徘徊在

回答

相關問題