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>

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

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

1 个答案: