jQuery中的平滑切换 [英] Smooth toggle in jQuery
问题描述
我正在使用一些简单的jQuery为切换按钮设置动画.切换有效,但是,无论我如何尝试更改值,似乎都无法改变动画的速度或平滑度.
I am using some simple jQuery to animate a toggle button. The toggle works, however, no matter how I try changing values, I cannot seem to change the speed or smoothness of the animation.
我研究了不同的方法,并尝试更改.sliderUp部分中的值,但这对我不起作用.
I have looked at different methods and tried changing the values within the .sliderUp section, it just isn't working for me.
我正在使用的代码是:
$(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;
}
}
推荐答案
尝试使用 slideToggle
语法
$(selector).slideToggle(speed,callback);
此处可选的速度参数可以采用以下值:慢",快",毫秒.
Here the optional speed parameter can take the following values: "slow", "fast", milliseconds.
所以我认为您需要花更多的时间来获得流畅的动画.
So i think you need to put more time to get smooth animation.
jQuery
$(document).ready(function(){
$("a.toggle").click(function(){
$("nav ul").slideToggle(1500);
$(this).toggleClass("open");
});
});
这是工作中的jsfiddle: https://jsfiddle.net/88bm4x6z/1/
Here is the working jsfiddle:https://jsfiddle.net/88bm4x6z/1/
这篇关于jQuery中的平滑切换的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!