Jquery 我可以在这上面加上缓和吗？

我有一个滑动部分设置如下。我想知道，当幻灯片上下移动时，我是否可以以某种方式添加

easeIn

和

easeOut

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(400, function(){
        $('#slide-toggle').removeClass('active');
    });
    return false;
});

$('a#slide-toggle').click(function(e) {
    e.preventDefault();

    var slideToggle = this;
    if ($('.slide-container').is(':visible')) {
        $('.slide-container').slideUp(400,function() {
            $(slideToggle).removeClass('active');
        });
    }
    else {
        $('.slide-container').slideDown(400);
        $(slideToggle).addClass('active');
    }
});

---

你可以。请查看位于jQuery docs；的文档

默认情况下，jQUery只实现线性函数和摆动函数。对于附加的缓解功能，您必须使用jQUery UI

---

更新：

根据文档，第二个可选参数是一个字符串，指示函数的名称

所以

将成为

$('.slide-container').slideUp(400,'linear', function(){
        $('#slide-toggle').removeClass('active');
    });

使用线性缓和函数

---

同样，对于其他easing函数也可以。

当然可以，确保像常规jQuery库一样包含jQuery UI脚本，并将easing参数添加到函数中

就像这样

$('a#slide-up').click(function () {
    $('.slide-container').slideUp(400,'easeIn', function(){
    $('#slide-toggle').removeClass('active');
});
 return false;
});

$('a#slide-toggle').click(function(e) {
    e.preventDefault();

var slideToggle = this;
if ($('.slide-container').is(':visible')) {
    $('.slide-container').slideUp(400,'easeOut',function() {
        $(slideToggle).removeClass('active');
    });
}
else {
    $('.slide-container').slideDown(400);
    $(slideToggle).addClass('active');
}

}))

同样的道理也适用于美国

对于slideUp和slideDown，您可以添加整个负载的

，以添加缓和效果：

$(".slide-container").slideUp({
    duration:500,
    easing:"easeOutExpo",
    complete:function(){
         $(slideToggle).removeClass("active");
    }
});

---

HTH

阅读本文，我查看了文档，但仍不确定如何实施。我确实添加了jqueryui。你能告诉我在哪里实现easeIn和easeOut吗？谢谢。对于

else

后面的行，我必须这样做吗<代码>$（'.slide container'）。向下滑动（400，'linear'，''因为没有函数？@John，你可以留下它，因为它是可选的。例如，$（'slide container'）。slideDown（400，'linear'）；很好。我尝试了你的建议，添加了jQuery UI脚本，并在这两行中添加了

easeIn

和

easeOut

；但是，现在单击“切换”或“关闭”按钮时，幻灯片不会向上滑动。

$(".slide-container").slideUp({
    duration:500,
    easing:"easeOutExpo",
    complete:function(){
         $(slideToggle).removeClass("active");
    }
});