jquery - 我如何让我的 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>