jquery动画效果之回调

1. *{
2.      margin: 0;
3.      padding: 0;
4.    }
5.    .box{
6.      width: 500px;
7.      height: 300px;
8.      background: #e5e5e5;
9.      margin: 0 auto;
10.       overflow: hidden;
11. 
12.     }
13.     .word {
14.       width: 260px;
15.       height: 300px;
16.       float: left;
17.     }
18.     .word p{
19.       margin-left: -400px;
20.     }
21.     .word h1{
22.       margin-left: -400px;
23. 
24.     }
25.     .img{
26.       width:240px ;
27.       height: 300px;
28.       float: left;
29.     }
30.     .img img{
31.       width: 200px;
32.       height: 300px;
33.       margin-left:300px ;
34.     }

1. <div class="box">
2.      <!-- 放文字的盒子-->
3.      <div class="word">
4.        <h1>魁拔之大战元泱界</h1>
5.        <p>魁拔父亲</p>
6.        <p>魁拔部下</p>
7.        <p>魁拔来临</p>
8. 
9.      </div>
10.       <!-- 放图片的盒子-->
11.       <div class="img">
12.         <img src="img/1.jpg"  />
13.       </div>
14. 
15.     </div>

1. //获取文本并加效果
2. 
3.    $(".word h1").animate({
4.      "marginLeft":"0px"
5.    },1000 ,function(){
6. 
7.      $(".word p:nth-child(2)").animate({
8.        "marginLeft":"0px"
9. 
10.       },1000,function(){
11.         $(".word p:nth-child(3)").animate({
12.           "marginLeft":"0px"
13.         },1000,function(){
14. 
15. 
16.           $(".word p:nth-child(4)").animate({
17.             "marginLeft":"0px"
18.           },1000 ,function(){
19. 
20.             $(".img img").animate({
21.               "marginLeft":"0px"
22. 
23.             },1000)
24.           })
25.         })
26. 
27.       })
28. 
29.     })
30. 
31.