如何使用jquery一個接一個地執行一系列動畫？

Question

這將在第一個動畫完成后為第二個圖像設置動畫：

<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）制作動畫的有效方法是什么？

Answer 1

$('#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));
    }
}

Answer 2

我認為語法/格式就在這里。 你有關閉括號，你不應該在第二和第三行。

<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>