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="按钮" /> <input type="button" class="stop" value="停止" /> <input type="button" class="ani" 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({ left :'800px' },3000); }); $('.stop').click(function(){ $('#box').stop(); }); $('.button').click(function(){ $('#box').animate({left :'300px'},1000) .animate({bottom :'300px'},1000) .animate({width :'300px'},1000) .animate({height :'300px'},1000); }); $('.stop').click(function(){ $('#box').stop(); }); //如果有列队动画,停止的话,那么会停止掉第一个列队动画,然后继续执行后面的列队动画 $('.stop').click(function(){ $('#box').stop(true); }); //第一个参数,如果为 true,就是停止并并且清除后台的列队动画,动画即完全停止 //默认值为 false $('.stop').click(function(){ $('#box').stop(true,true); }); //第二个参数,如果为 true ,停止后会跳转到末尾的位置上.默认值为 false $('.button').click(function(){ $('#box').delay(1000) .animate({left :'300px'}) .animate({bottom :'300px'}).delay(2000) .animate({width :'300px'}) .animate({height :'300px'}); }); $('#box').slideToggle('slow',function(){ $(this).slideToggle('slow',arguments.callee); }); $('.ani').click(function(){ $(':animated').stop().css('background','blue'); }); $.fx.interval = 200; $.fx.off = true;//关闭动画 $('.button').click(function(){ $('#box').toggle(1000); }); $('.button').click(function(){ $('#box').animate({ left:'800px' },3000,'swing'); }); */ $('.button').click(function(){ $('#box').animate({ left:'800px' },3000,'swing'); $('#pox').animate({ left:'800px' },3000,'linear'); }); });