javascript - 下拉列表不对jQuery中的.slideDown（）进行动画处理(Dropdown list not animating .slideDown() in jQuery)

Question

I have a nav list with a nested which I want to expand down (and up) when hovered on.(我有一个带有嵌套的导航列表，将其悬停时可以向下（向上）扩展。)

The .slideUp() function works flawlessly, but the .slideDown() is not animating at all.(.slideUp（）函数可完美工作，但.slideDown（）根本没有动画。)

 $('.dropdownLink').hover(function(e) { e.preventDefault(); $('#dropdown').slideDown(900, function() { $('#dropdown').css("visibility", "visible"); }); }, function() { $('#dropdown').slideUp(900, function() { $('#dropdown').css("visibility", "hidden"); }); }); 

 #dropdown { display: flex; justify-content: space-around; flex-direction: column; padding-top: 10px; visibility: hidden; } #dropdown li { margin-top: 13px; } #dropdown li a { font-size: 0.9em; padding: 3px 3px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navigation"> <ul> <li><a class="link" href="#">Home</a></li> <li><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a> <ul id="dropdown"> <li><a class="link" href="#">Model S</a></li> <li><a class="link" href="#">Model 3</a></li> <li><a class="link" href="#">Model X</a></li> <li><a class="link" href="#">Cybertruck</a></li> <li><a class="link" href="#">Roadster</a></li> <li><a class="link" href="#">Energy</a></li> </ul> </li> <li><a class="link" href="#">About</a></li> <li><a class="link" href="#">Order</a></li> <li><a class="link" href="#">Contact</a></li> </ul> </nav> 

  ask by Filip Vuskovic translate from so

Answer 1

No need to play with visibility .(无需发挥visibility 。)

Just add display: none to your CSS, jQuery will take care of the rest.(只需添加display: none CSS display: none ，其余的将由jQuery负责。)

Also, don't add the hover event listener to the link.(另外，不要将hover事件监听器添加到链接中。)

As soon as you'll move your mouse towards the submenu, it will disappear because your cursor won't be hovering the link anymore.(一旦将鼠标移到子菜单，它就会消失，因为您的光标将不再悬停该链接。) Instead, you can add it to the parent <li> .(相反，您可以将其添加到父<li> 。)

And finally, as mentioned below by @Taplar, to avoid animation stacking when you move in and out fast, use .stop() :(最后，如下面@Taplar所述，为避免动画在快速移入和移出时堆叠，请使用.stop() ：)

 $('.dropdownContainer').hover(function(e) { // <--- e.preventDefault(); $('#dropdown').stop().slideDown(900); // <--- }, function() { $('#dropdown').stop().slideUp(900); // <--- }); 

 #dropdown { display: flex; justify-content: space-around; flex-direction: column; padding-top: 10px; display: none; /* <------------------------- */ } #dropdown li { margin-top: 13px; } #dropdown li a { font-size: 0.9em; padding: 3px 3px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navigation"> <ul> <li><a class="link" href="#">Home</a></li> <!-- vvvvvvvvv --> <li class="dropdownContainer"><a class="link dropdownLink" href="#">Models <i class="fas fa-caret-down"></i></a> <ul id="dropdown"> <li><a class="link" href="#">Model S</a></li> <li><a class="link" href="#">Model 3</a></li> <li><a class="link" href="#">Model X</a></li> <li><a class="link" href="#">Cybertruck</a></li> <li><a class="link" href="#">Roadster</a></li> <li><a class="link" href="#">Energy</a></li> </ul> </li> <li><a class="link" href="#">About</a></li> <li><a class="link" href="#">Order</a></li> <li><a class="link" href="#">Contact</a></li> </ul> </nav>