在单个元素上使用多个动画（连续）

Question

我试过这个：

$('.element').animate({marginLeft: '-=1'}, 1).animate({marginTop: '+=1'}, 1).animate({marginLeft: '+=1'}, 500);

这样做的想法是，我在现实中使用上边距为幻灯片制作动画，但我不希望用户看到它是从左到右制作动画的。在我的情况下，我不能只是从左向右滑动，否则会很容易。

上面的代码没有得到我想要的结果，它只是滞后了一段时间，很快就出现了。

Answer 1

我发现了几种不同的方法来实现这种程序动画。 正如 Dio 所说，一种有效的方法是在回调“完成”函数中启动动画。 但更有效的方法是使用队列。默认队列是“fx”，但您可以创建自定义队列。 I used this to help me with queues.

但如果你不喜欢队列并且想要重复，我使用 setInterval 函数做了类似的事情。

See my beta example here.（仍未发布）。请参阅下面的代码示例：

<script>
            $(document).ready(function(){
        sliderAnimation();                     
    });
    sliderAnimation(){
        var timer = setInterval(function(){
            slide();},500);
    }
slide(){
    var position $('.element').pos();
    var direcLeft = '-=';
    var direcRight = '+=';
    if(position.left => 499){
        var move = direcLeft + '500';
    }
    else {
        var move = direcRight + '500';  
    }
    $('.element').animate({marginLeft : move},500)
}
</script>

我没有测试过这段代码，但它应该从右向左移动并重复，因为距离、间隔和动画间隔具有相同的变量。