Question

我有一个如下设置的滑动部分。我想知道当幻灯片上下移动时我是否可以以某种方式添加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');
    }
});

Answer 1

你可以。请查看jQuery docs上的slideDown文档;

默认情况下，jQUery仅实现线性和摆动缓动功能。对于其他缓动函数，您必须使用jQUery UI

更新：

根据doc，第二个可选参数是一个表示缓动函数名称的字符串。

所以，

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

将成为

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

使用线性缓动功能。

同样，对于其他缓和功能也是如此。

Answer 2

对于 slideUp 和 slideDown ，您可以添加缓动效果：

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

HTH

Answer 3

您确定可以确保包含jQuery UI脚本，就像使用常规jQuery库一样，并将缓动参数添加到slideUp()函数中。

像这样...

$('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');
}

}）;

slideDown()

也是如此

Theres负载easing functions

我可以添加缓和吗？

3 个答案: