Question

我在这里复制了我的问题 - jsfiddle。

在mouseleave上，反向动画效果消失了。

我认为它与＆＃34;显示＆＃34;有关。财产，但我不知道如何解决这个问题。我猜这种情况发生的原因是由于＆＃34; display：block＆＃34;在悬停，但然后它恢复显示：无？

如果我然后强迫＆＃34;显示：阻止＆＃34;在子菜单元素上，它一次显示所有子菜单选项。

HTML

<nav>
  <ul class="level-2">
    <li class="has-child"> <a href="/clients/">Clients</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/clients/test1/">Test1</a> </li>
      </ul>
    </li>
    <li class="has-child"> <a href="/services/">Services</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/services/test2/">Test2</a> </li>
      </ul>
    </li>
  </ul>
</nav>

JQuery的

$(document).ready(function () {
    $('.level-2 li').on({
        mouseenter: function () {
            $('.submenu').stop().animate({ 'margin-left':"300px" }, 1000);
        },
        mouseleave: function () {
            $('.submenu').stop().animate({ 'margin-left':"-200px" }, 1000);
        }
    });
});

Answer 1

问题是display: none分配给.submenu规则，因此只要您将光标移出元素，display就会设置为none，这将删除该项目被渲染。

＆＃13;

$(document).ready(function() {
  $('.level-2 > li').on({
    mouseenter: function() {
      $('.submenu', this).stop().removeClass('hidden').animate({
        'margin-left': "300px"
      }, 1000);
    },
    mouseleave: function() {
      $('.submenu', this).stop().animate({
        'margin-left': "-200px"
      }, 1000);
    }
  });
});

＆＃13;

nav ul li a {
  list-style: none;
  color: #cccccc;
}
.hidden {
  display: none;
}
.submenu {
  position: fixed;
  left: -120px;
  top: 0;
  width: 200px;
  height: 100%;
  background: #3a4247 none repeat scroll 0 0;
  z-index: -1;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul class="level-2">
    <li class="has-child"> <a href="/clients/">Clients</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/clients/test1/">Test1</a> </li>
      </ul>
    </li>
    <li class="has-child"> <a href="/services/">Services</a>
      <ul class="sublevel level-3 submenu">
        <li class="nav-item"> <a href="/services/test2/">Test2</a> </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

JQuery - Mouseleave不工作

1 个答案: