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;
}
});