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