jquery动画效果之回调

css代码：

*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 500px;
			height: 300px;
			background: #e5e5e5;
			margin: 0 auto;
			overflow: hidden;
			
		}
		.word {
			width: 260px;
			height: 300px;
			float: left;
		}
		.word p{
			margin-left: -400px;
		}
		.word h1{
			margin-left: -400px;
			
		}
		.img{
			width:240px ;
			height: 300px;
			float: left;
		}
		.img img{
			width: 200px;
			height: 300px;
			margin-left:300px ;
		}

html 代码

<div class="box">
			<!-- 放文字的盒子-->
			<div class="word">
				<h1>魁拔之大战元泱界</h1>
				<p>魁拔父亲</p>
				<p>魁拔部下</p>
				<p>魁拔来临</p>
				
			</div>
			<!-- 放图片的盒子-->
			<div class="img">
				<img src="img/1.jpg"  />
			</div>
			
		</div>

jquery代码

//获取文本并加效果
		
		$(".word h1").animate({
			"marginLeft":"0px"
		},1000 ,function(){
			
			$(".word p:nth-child(2)").animate({
				"marginLeft":"0px"
				
			},1000,function(){
				$(".word p:nth-child(3)").animate({
					"marginLeft":"0px"
				},1000,function(){
					
					
					$(".word p:nth-child(4)").animate({
						"marginLeft":"0px"
					},1000 ,function(){
						
						$(".img img").animate({
							"marginLeft":"0px"
							
						},1000)
					})
				})
				
			})
			
		})
		
		
		

ok 以上就是jq动画效果了