jQuery中的平滑切换

Question

我正在使用一些简单的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"); 
     } 
    }); 
}); 

-

<nav> 
    <a href="#" class="toggle">Toggle Menu</a> 
    <ul> 
     <li>Menu Item</li> 
     <li>Menu Item</li> 
    </ul> 
</nav> 

-

nav { 
    width: 100%; 

    ul { 
     display: none; 
     width: 100%; 

     &.expanded { 
      display: block; 
     } 
    } 

    .toggle { 
     display: block !important; 
    } 
} 

Answer 1

尝试使用的slideToggle

的Syn税收

$(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/