第11章动画效果（中）

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动画效果</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<input type="button" class="button" value="按钮" />
<div id="box">
    box
</div>

<div id="pox">
    pox
</div>

</body>
</html>

style.css

/* CSS Document */

#box{ width:100px; height:100px; background:red; position:absolute;}
#pox{ width:100px; height:100px; background:green; top:200px; position:absolute;}

demo.js

$(function(){
	/*
	$('.button').click(function(){
		$('#box').animate({
			width:'300px',
			height:'200px',
			opacity:0.5,
			fontSize:'50px'
		});
	});
	
	$('.button').click(function(){
		$('#box').animate({
			width:'300px',
			height:'200px',
			opacity:0.5,
			fontSize:'50px'
		},2000,function(){
			alert('动画执行完毕');
		});
	});
	
	$('.button').click(function(){
		$('#box').animate({
			left:'300px',
			top:'200px'
		},'slow');
	});
	
	$('.button').click(function(){
		$('#box').animate({
			left:'+=100px'
		},'slow');
	});
	
	//回调函数 + 列队动画
	$('.button').click(function(){
		$('#box').animate({
			width:'300px'
		},function(){
			$('#box').animate({
				height:'200px'
			},function(){
				$('#box').animate({
					opacity:0.5
				},function(){
					$('#box').animate({
						fontSize:'50px'
					});
				});
			});
		});
	});
	
	//在同一个元素的基础上，使用连缀或顺序排列调用，可以实现列队动画
	$('.button').click(function(){
		$('#box').animate({width:'300px'})
		.animate({height:'200px'})
		.animate({opacity:0.5})
		.animate({fontSize:'50px'});
	});
	
	//在同一个元素的基础上，使用连缀或顺序排列调用，可以实现列队动画
	$('.button').click(function(){
		$('#box').animate({width:'300px'});
		$('#box').animate({height:'200px'});
		$('#box').animate({opacity:0.5});
		$('#box').animate({fontSize:'50px'});
	});
	
	$('.button').click(function(){
		$('#box').animate({width:'300px'});
		$('#pox').animate({height:'200px'});
		$('#box').animate({opacity:0.5});
		$('#pox').animate({fontSize:'50px'});
	});
	//box 的第一条和第三条是列队动画
	//pox 的第二条和第四条是列队动画
	//box 的第一条和 pox 的第二条是同步动画
	//box 的第三条和 pox 的第四条是同步动画
	
	//回调函数 + 列队动画
	$('.button').click(function(){
		$('#box').animate({
			width:'300px'
		},function(){
			$('#pox').animate({
				height:'200px'
			},function(){
				$('#box').animate({
					opacity:0.5
				},function(){
					$('#pox').animate({
						fontSize:'50px'
					});
				});
			});
		});
	});
	
	$('.button').click(function(){
		$('#box').slideUp('slow').slideDown('slow').css('background','orange');
	});
	//CSS 不是动画方法，会默认排列到和第一个动画方法同步
	
	$('.button').click(function(){
		$('#box').slideUp('slow').slideDown('slow',function(){
			$(this).css('background','orange');
		});
	});
	
	$('.button').click(function(){
		$('#box').slideUp('slow').slideDown('slow').queue(function(){
			$(this).css('background','orange');
		});
	});
	
	//next
	$('.button').click(function(){
		$('#box').slideUp('slow').slideDown('slow').queue(function(next){
			$(this).css('background','orange');
			next();
		}).hide('slow');
	});
	
	//dequeue
	$('.button').click(function(){
		$('#box').slideUp('slow').slideDown('slow').queue(function(){
			$(this).css('background','orange');
			$(this).dequeue();
		}).hide('slow');
	});
	
	$('.button').click(function(){
		$('#box').slideUp('slow');
		$('#box').slideDown('slow');
		$('#box').queue(function(){
			$(this).css('background','orange');
			$(this).dequeue();
		});
		$('#box').hide('slow');
	});
	
	$('.button').click(function(){
		$('#box').slideUp('slow',function(){alert(count());});
		$('#box').slideDown('slow');
		$('#box').queue(function(){
			$(this).css('background','orange');
			$(this).dequeue();
		});
		$('#box').hide('slow');
	});
	
	function count(){
		return $('#box').queue('fx').length;
	}
	*/
	
	$('.button').click(function(){
		$('#box').slideUp('slow');
		$('#box').slideDown('slow',function(){$(this).clearQueue()});
		$('#box').queue(function(){
			$(this).css('background','orange');
			$(this).dequeue();
		});
		$('#box').hide('slow');
	});
	
	function count(){
		return $('#box').queue('fx').length;
	}	
});

第11章 动画效果（中）

猜你喜欢

第11章动画效果（中）