TweenMax学习记录二
8、add——添加状态 参数说明：字符串或一个函数
9、TweenTo——完成指定的动画（过渡） 参数说明：指定时间或状态的字符串
Demo:
<!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" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/TweenMax.min.js"></script> <title>无标题文档</title> <style type="text/css"> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> $(function(){ var t=new TimelineMax(); t.add("state1"); t.to("#div1",1,{left:300}); t.to("#div1",2,{width:300}); t.add("state2"); //指定某个状态 t.to("#div1",3,{height:300}); t.add("state3"); t.stop(); t.tweenTo("state2");//完成指定的动画,即完成state2之前的动画 }) </script> </head> <body> <div id="div1"></div> </body> </html>
解释说明：当add()里面的参数是一个函数的时候,添加函数并执行函数，见下面的demo
<!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" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/TweenMax.min.js"></script> <title>无标题文档</title> <style type="text/css"> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> $(function(){ var t=new TimelineMax(); t.add("state1"); t.to("#div1",1,{left:300}); t.to("#div1",2,{width:300}); t.add(function(){ $('#div1').css("background","blue"); //添加函数并执行里面的内容 }); t.add("state2"); //指定某个状态 t.to("#div1",3,{height:300}); t.add("state3"); t.stop(); t.tweenTo("state2");// }) </script> </head> <body> <div id="div1"></div> </body> </html>
add()配合tweenTo（）使用，当完成某一个状态之前的动画时，添加add(function(){})，执行次函数。
当TweenTo()里面的参数是时间的时候，即为完成指定时间内的动画。
10、seek():完成指定的动画（无过渡）
参数说明：(1)指定时间或状态 (2)【可选】布尔值 true:不执行函数 默认; false:执行函数
<!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" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/TweenMax.min.js"></script> <title>无标题文档</title> <style type="text/css"> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </style> <script> $(function(){ var t=new TimelineMax(); t.add("state1"); t.to("#div1",1,{left:300}); t.to("#div1",2,{width:300}); t.add("state2"); //指定某个状态 t.add(function(){ $('#div1').css("background","blue"); //添加函数并执行里面的内容 }); t.to("#div1",3,{height:300}); t.add("state3"); t.stop(); t.seek("state2");//指定直接到达目标点，无过渡动画 }) </script> </head> <body> <div id="div1"></div> </body> </html>
11、time():动画已执行的时间
12、clear():清楚所有的动画
13、staggerTo():添加动画
参数说明:(1)元素选择器或对象(2)持续时间 (3)对象 变化的属性——>值 (4)【可选】动画延迟发生时间 可写数字, '-=0.5','+=0.5'
其中前三个参数和to()类似，重点说明一下第四个参数,见以下Demo：
<!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" /> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/TweenMax.min.js"></script> <title>无标题文档</title> <style type="text/css"> .box{ width:100px; height:100px; background:red; margin:6px 0;} </style> <script> $(function(){ var t=new TimelineMax(); //t.to(".box",1,{width:300}); t.staggerTo(".box",1,{width:300},1); }) </script> </head> <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </body> </html>
class为.box的元素依次延迟执行
