如何使用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>