javascript - jQuery - slideUp 开始快结束慢？

Question

我有一个下拉菜单，它使用 jQuery 中的 slideUp 功能。我想知道我是否可以取消恒定速度并开始快结束慢。看了一圈，看了animate中的easing方法，试了一下，好像对slideUp不起作用，只有animate(如果我错了请告诉我)；但除此之外，我似乎无法弄清楚。有任何想法吗？这是我当前的代码:

$(document).ready(function(){
    var h = "fast";

    $("[data-action='dropdown']").click(function(e) {
        e.stopPropagation();
    });

    $("body").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);
    });

    $("[data-action='dropdown'] ul li").click(function() {
        $("[data-action='dropdown'] ul ul").slideUp(h);

        $("ul", this).slideDown(h, function(){
            $("ul", this).slideUp(h);
        });
    });
});

HTML 是一个非常基本的下拉结构(只是一个带有 li 的 ul 元素，然后是嵌套在里面的 ul。然后在css，我让它到达内部 ul ul 隐藏的地方，显示为 none，然后，当然，由 jQuery 切换)。

任何帮助将不胜感激! :-)

Answer 1

我们可以使用 jQuery easing plugin去做这个。

包含 jQuery 缓动 Javascript 文件:

https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js

然后我们可以在 slideUp 函数中使用缓动变量作为参数。

Javascript

jQuery('#Example').slideUp({
    duration: 1000,
    easing: 'easeOutCubic'
});

Demo