JQuery

Question

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

在鼠标离开时，反向动画效果就消失了。

我认为这与"display" 属性有关，但我不确定如何解决这个问题。我想发生这种情况的原因是悬停时 "display:block"，但随后又恢复为 display:none?

如果我随后在子菜单元素上强制 "display:block"，它会立即显示所有子菜单选项。

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将从渲染中删除该项目。

$(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);
    }
  });
});

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;
}

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

JQuery - Mouseleave 不工作

JQuery - Mouseleave not working

javascript

css

jquery-animate