为什么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

似乎您使用悬停功能有点不对 首先，如果您输出日志以查看何时调用您的函数，您可以看到您的鼠标没有调用，因为要触发它，您应该使用类子菜单的元素。所以， toggle 中的这个元素，当你离开它时，你也会留下带有 toggle 类的元素，再次引发悬停函数。

如果 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>

Answer 2

在我看来show()之后正在调用hide()，因为由于某种原因，在mouseleave之后会触发根菜单上的悬停事件。看看这个输出：

$(document).ready(function(){
    $(".toggle").hover(function(){
        $(".submenu").hide();
    $('body').append('hovering, calling show() <br/>');
        $(this).find(".submenu").first().show();

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

    $(".submenu").mouseleave(function(){
    $('body').append('mouse left, calling hide() <br/>');
        $(".submenu").hide(); // whi this not work?? Try change it to fadeOut()
    });
});

我用fadeout检查了同样的事情发生了，我认为看起来它“有效”因为show（）拒绝中断动画。动画完成后，新的悬停事件将恢复透明度，但不会是50％的中间值。

解决方案？ hover事件具有in和out处理程序。 http://api.jquery.com/hover/希望时机在那些时候是正确的。即你的外部处理程序可以隐藏子菜单，这将是它的结束。