javascript - Javascript 动画按时返回

Question

嘿，我有 javascript 动画幻灯片，假设在浏览器刷新时动画。幻灯片，滑出到 0px，然后在 500 之后假设滑回 -280 我遇到的问题是我无法让它滑回。我的代码中有一个错误。这是代码：

$("#slideout").animate({right:'0px'}, {queue: false, duration: "slow"}, function () {
    timer = setTimeout(function () {
        $("#slideout").animate({right:'-280px'}, {queue: false, duration: 500})
    }, 500);
});

该功能不起作用，有人可以发布代码来修复它吗？

Answer 1

看起来你弄错了 的参数animate。方法签名是这样的：

.animate( properties [, duration ] [, easing ] [, complete ] )

或这个：

.animate( properties, options )

因此，如果您要指定选项，那么您应该将完整的函数作为“完成”选项传递，如下所示：

$("selector").animate({right: 0}, { queue: false, done: function() {
    // next animation
} });

另请注意，您可能想要动画left而不是right- 注意这right: 0相当于left: $(window).width() - $("#slideout").width().

小提琴演示

Answer 2

我认为您可以执行以下操作：

$("#slideout").animate({right:'+=200'},500,function(){}).delay(500).animate({right:'-=200'},{duration:500});

或者更准确地说，我猜可能是这样的：

$("#slideout").animate({right:'200px'},
                       "slow",
                       function(){
                         $("#slideout").animate({right:'0'},500);
                       })

第二个可能是您正在寻找的更多内容。