Question

我有一个下拉菜单，它使用jQuery中的slideUp功能。我想知道我是否可以移除恒定速度并快速启动并结束缓慢。我环顾四周，了解了easing中的animate方法，我试过了，但它似乎不适用于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是一个非常基本的下拉结构（只有一个ul元素，li s然后内部ul嵌套在里面。然后在css中，我将它转到内部的地方ul ul被隐藏，显示为none，当然，由jQuery切换）。

非常感谢任何帮助！ :-)

Answer 1

如上所述，您可以使用jquery easing plugin执行此操作。

下载并加入此javascript文件：

http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

然后，您可以将缓动变量用作slideUp函数中的参数。

<强>的Javascript

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

<强> Demo

jQuery - slideUp快速启动并结束缓慢？

1 个答案: