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

语法

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

此处可选的速度参数可以采用以下值：＆＃34;慢＆＃34;，＆＃34;快＆＃34;，毫秒。

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

Jquery的

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

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

Answer 2

如果任何人仍然无法平滑滑动，只需设置transition: none;。如果您将其用于父项或子项，则我会在其中停留3个小时。然后我只是将其设置为none，就可以了。

jQuery中的平滑切换

2 个答案: