如何使用jquery一个接一个地执行一系列动画

how to execute a series of animations one after another using jquery?

本文关键字：一个 执行 一系列 动画 jquery 何使用      更新时间：2023-09-26

这将在第一个动画完成后动画第二个图像:

<script type="text/javascript">
        $(document).ready(function () {
            $('#image1').show("slide", { direction: 'left' }, 1000,
             function() { $('#image2').show("slide", { direction: 'left' }, 1000)});
    </script>

如果我有四个图像，我在下面尝试-只有前两个图像动画。

<script type="text/javascript">
        $(document).ready(function () {
            $('#image1').show("slide", { direction: 'left' }, 1000,
             function() { $('#image2').show("slide", { direction: 'left' }, 1000)},
             function () { $('#image3').show("slide", { direction: 'left' }, 1000)},
             function () { $('#image4').show("slide", { direction: 'left' }, 1000)});
    </script>

那么，将所有图像(4)按顺序动画的有效方法是什么?

$('#image1').show("slide", { direction: 'left' }, 1000, function() {
    $('#image2').show("slide", { direction: 'left' }, 1000, function () {
        $('#image3').show("slide", { direction: 'left' }, 1000, function () { 
            $('#image4').show("slide", { direction: 'left' }, 1000);
        });
    });
});

你也可以这样做:

slide(1);
function slide(id){
    if(id<5){
        $('#image'+id).show("slide", { direction: 'left' }, 1000, function(){ slide(id+1));
    }
}

我觉得这里的语法/格式不对。在第二行和第三行不应该使用的地方有右括号

<script type="text/javascript">
        $(document).ready(function () {
    $('#image1').show("slide", { direction: 'left' }, 1000, function() {
        $('#image2').show("slide", { direction: 'left' }, 1000, function () {
            $('#image3').show("slide", { direction: 'left' }, 1000, function () { 
                $('#image4').show("slide", { direction: 'left' }, 1000);
            });
        });
    });
    });
</script>
相关文章：