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