JQuery - Mouseleave не работает

Question

Я реплицировал свою проблему здесь - jsfiddle.

На мышеловке эффект обратного одушевления просто исчезает.

Я думаю, что это имеет какое-то отношение к свойству «display», но я не уверен, как это разрешить. Я думаю, причина в том, что это происходит из-за «отображения: блок» при наведении, но затем он возвращается для отображения: нет?

Если я затем принудительно нажимаю «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>