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()。

Fiddle demo

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);
                       })

第二个可能更多是你正在寻找的东西。

Javascript按时动画

2 个答案: