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

Posted 2023-05-08

【中文标题】在单个元素上使用多个动画（连续）

【英文标题】：Using multiple animations (in a row) on a single element

【发布时间】：2012-11-11 19:43:32

【问题描述】：

我试过这个：

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

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

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

【问题讨论】：

可能 > [此链接将帮助您检查此问题的答案](***.com/questions/8976754/…) 这是因为 true false property

【参考方案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>

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