jquery要素が数秒後に消えるのを止めるにはどうすればよいですか？

Question

ナビゲーションバーにカーソルを合わせるたびにマウスが移動している間に数秒後に消えるだけです

私は<div>にすべてがあります。

https://jsfiddle.net/4zz1amh8

HTML：

<div id="navigation"> 
<ul> 
<li><a href="Home.html">Home</li></a> 
<li><a href="Contact.html">Contact</li></a> 
<li><a href="https://www.facebook.com/Patch-of-Blue-727128433991978">Facebook</li></a> 
<li><a href="https://plus.google.com/+PatchofBlueBlueberriesPenetanguishene">Google+</li></a> 
<li><a href="https://www.tripadvisor.ca/Attraction_Review-g678572-d7113482-Reviews-Patch_of_Blue-Penetanguishene_Ontario.html">TripAdvisor</li></a> 
<li><a href="http://www.penetang.com/blueberries">Penetang.com</li></a> 
</ul> 
</div> 
<button id="navi-button">Hover To Show Navigation Menu</button> 

CSS：

ul{ list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: #333; 
    } 
    li { 
     float: left 
    } 
    li a { 
     display: block; 
color: white; 
text-align: center; 
padding: 14px 16px; 
text-decoration: none; 
    } 
    li a:hover { 
     background-color: blue; 
    } 

    #navigation{ 
     display:none; 
     margin:10px 10px 10px 10px; 
    } 
    #navi-button{ 
     bdorer-color:none; 
     border-width:0px; 
     background-color:#333; 
     color:white; 
     font-size:20px; 
     border-radius:30px; 

のjQuery：事前に

$(document).ready(function() { 
$("#navi-button").mouseenter(function(){ 
    $("#navigation").show('fast'); 
    $("#navi-button").hide('fast'); 
}); 
$("#navigation").mouseout(function() { 
    $("#navi-button").show('slow'); 
}); 
$("#navigation").mouseout(function() { 
    $("#navigation").hide('slow'); 
}); 
}); 

感謝:)。

Answer 1

私はこれがあなたが望むものだと思います。

[表示]ボタンにマウスを重ねるとナビゲーションメニューが表示され、ナビゲーションメニューを終了するとナビゲーションが非表示になります。

$(document).ready(function() { 
 
$("#navi-button").mouseenter(function(){ 
 
    $("#navigation").show('fast'); 
 
    $("#navi-button").hide('fast'); 
 
}); 
 

 
$("#navigation").mouseleave(function() { 
 
    $("#navigation").hide('slow'); 
 
    $("#navi-button").show('slow'); 
 
}); 
 
});

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover { 
 
    background-color: blue; 
 
} 
 
#navigation { 
 
    display: none; 
 
    margin: 10px 10px 10px 10px; 
 
} 
 
#navi-button { 
 
    bdorer-color: none; 
 
    border-width: 0px; 
 
    background-color: #333; 
 
    color: white; 
 
    font-size: 20px; 
 
    border-radius: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="navigation"> 
 
    <ul> 
 
    <li><a href="Home.html">Home</li></a> 
 
     <li><a href="Contact.html">Contact</li></a> 
 
     <li><a href="https://www.facebook.com/Patch-of-Blue-727128433991978">Facebook</li></a> 
 
      <li><a href="https://plus.google.com/+PatchofBlueBlueberriesPenetanguishene">Google+</li></a> 
 
      <li><a href="https://www.tripadvisor.ca/Attraction_Review-g678572-d7113482-Reviews-Patch_of_Blue-Penetanguishene_Ontario.html">TripAdvisor</li></a> 
 
       <li><a href="http://www.penetang.com/blueberries">Penetang.com</li></a> 
 
    </ul> 
 
</div> 
 
<button id="navi-button">Hover To Show Navigation Menu</button>