javascript - 为什么 jQuery hide() 不起作用但 fadeOut() 起作用？

Question

jsfiddle

为什么 hide() 不起作用？当我尝试将 hide() 更改为 fadeOut() 时，它就可以工作了。为什么？

$(document).ready(function() {
  $(".toggle").hover(function() {
    $(".submenu").hide();
    $(this).find(".submenu").first().show();

    $(".hlavnaKategoria").removeClass("active");
    $(this).addClass("active");
  });

  $(".submenu").mouseleave(function() {
    $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700&subset=latin,latin-ext);
 html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
html {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.bold,
.strong {
  font-weight: bold;
}
.padding20 {
  padding: 20px;
}
.padding10 {
  padding: 10px;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #1B6CBF;
  height: 100px;
}
.big {
  font-size: 18pt;
}
.menu {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 0px;
  border-right: 1px solid #323232;
  text-align: right;
}
.menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: inherit;
}
.menu ul li.hlavnaKategoria {
  cursor: pointer;
  padding: 10px 20px 10px 10px;
}
.menu ul li.hlavnaKategoria .submenu {
  position: absolute;
  top: 0px;
  left: 201px;
  width: 800px;
  background: #323232;
  display: none;
  text-align: left;
  height: 100%;
  z-index: 100;
}
.submenu-item-box {
  width: 300px;
  text-align: left;
  margin: 10px 5px 5px 10px;
  border-left: 5px solid silver;
}
.submenu-item-box:hover {
  border-left: 5px solid #1B6CBF;
}
.submenu-item-box a {
  text-decoration: underline;
  color: #fff;
}
li.hlavnaKategoria.active {
  background-color: #323232;
  border-right: 0px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="kategorie">
    <li class="hlavnaKategoria toggle" data-submenu="14">
      <a class="">Menu 1</a>
      <div class="submenu" id="sm_14">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
      </div>
    </li>
    <li class="hlavnaKategoria toggle" data-submenu="35">
      <a class="">Menu 2</a>
      <div class="submenu" id="sm_35">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 2</div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

看来你对hover功能的使用有点不对。
首先，如果您输出日志以查看何时调用您的函数，您可以看到您的鼠标没有调用，因为要触发它您应该在 submenu 类的元素上方。所以，这个元素在 toggle 中，当你离开它时，你也离开了带有 toggle 类的元素，这再次引发了 hover 功能。

如果 fadeOut 动画被延迟，并且实际上您在调用 show 函数后隐藏了元素。如果隐藏您隐藏元素，并立即显示它。

解决你应该使用hover with handlerIn, handlerOut params并在 handerIn 中显示，在 handlerOur 中隐藏。

样本:

$(document).ready(function() {
  $(".toggle").hover(function() {
    console.log('hover in');
    $(this).find(".submenu").first().show();
    $(this).addClass("active");
  },function(){
    console.log('hover out');
    $(".hlavnaKategoria").removeClass("active");
    $(".submenu").hide();
  });
});

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,700&subset=latin,latin-ext);
 html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 11pt;
}
html {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0);
}
.inline {
  display: inline-block;
  vertical-align: top;
  margin: 0 auto;
}
.hidden {
  display: none;
}
.bold,
.strong {
  font-weight: bold;
}
.padding20 {
  padding: 20px;
}
.padding10 {
  padding: 10px;
}
.header {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  background: #1B6CBF;
  height: 100px;
}
.big {
  font-size: 18pt;
}
.menu {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 0px;
  border-right: 1px solid #323232;
  text-align: right;
}
.menu ul {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: inherit;
}
.menu ul li.hlavnaKategoria {
  cursor: pointer;
  padding: 10px 20px 10px 10px;
}
.menu ul li.hlavnaKategoria .submenu {
  position: absolute;
  top: 0px;
  left: 201px;
  width: 800px;
  background: #323232;
  display: none;
  text-align: left;
  height: 100%;
  z-index: 100;
}
.submenu-item-box {
  width: 300px;
  text-align: left;
  margin: 10px 5px 5px 10px;
  border-left: 5px solid silver;
}
.submenu-item-box:hover {
  border-left: 5px solid #1B6CBF;
}
.submenu-item-box a {
  text-decoration: underline;
  color: #fff;
}
li.hlavnaKategoria.active {
  background-color: #323232;
  border-right: 0px;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
  <ul class="kategorie">
    <li class="hlavnaKategoria toggle" data-submenu="14">
      <a class="">Menu 1</a>
      <div class="submenu" id="sm_14">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
      </div>
    </li>
    <li class="hlavnaKategoria toggle" data-submenu="35">
      <a class="">Menu 2</a>
      <div class="submenu" id="sm_35">
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 1</div>
        </div>
        <div class="padding10 inline submenu-item-box">
          <div class="">Submenu 2</div>
        </div>
      </div>
    </li>
  </ul>
</div>