jQuery中的平滑切换

我使用一些简单的jQuery来设置切换按钮的动画。 然而，切换工作，无论我如何尝试更改值，我似乎无法改变动画的速度或平滑度。

我已经查看了不同的方法，并尝试更改.sliderUp部分中的值，它只是不适合我。

我使用的代码是：

$(document).ready(function(){ $("a.toggle").click(function(){ if ($("nav ul").hasClass("expanded")) { $("nav ul.expanded").removeClass("expanded").slideUp(250); $(this).removeClass("open"); } else { $("nav ul").addClass("expanded").slideDown(250); $(this).addClass("open"); } }); }); 

–

 
 Toggle Menu 
 
Menu Item
 
Menu Item
 
  

–

 nav { width: 100%; ul { display: none; width: 100%; &.expanded { display: block; } } .toggle { display: block !important; } } 

Answer 1

尝试使用slideToggle

句法

 $(selector).slideToggle(speed,callback); 

这里可选的速度参数可以采用以下值：“慢”，“快”， 毫秒 。

所以我认为你需要花更多的时间来获得流畅的动画效果。

jQuery的

 $(document).ready(function(){ $("a.toggle").click(function(){ $("nav ul").slideToggle(1500); $(this).toggleClass("open"); }); }); 

这是工作的jsfiddle： https ：//jsfiddle.net/88bm4x6z/1/