mootools实例：使用Tween来实现改变div宽度动画

本来一个div，宽度100px，使用mootools将它的宽度慢慢地变成300px，并且还有动画增加的效果。

<style type="text/css">
#t{
 width:100px;
 height:100px;
 border:1px solid #f00;
}
</style>
<script type="text/javascript" src="http://www.aspbc.com/js/mootools.js"></script>
<script type="text/javascript">
//当页面加载完后
window.addEvent('domready',function(){	
 //方法1
 $('btn').addEvent('click',function(){
 var newTweenElement = $('t');
   // 然后我们new一个FX.Tween，然后赋值给一个变量
    var newTween = new Fx.Tween(newTweenElement);
      if($('t').get('status')==0){		
      newTween.start('width', '100px', '300px');
       $('t').set('status',1);
    }
    else
     {
        newTween.start('width', '300px', '100px');
	 $('t').set('status',0);
     }
 });
	
	
//方法2
$('dh_btn').addEvent('click',function(){
 if($('t').get('status')==0){
  $('t').tween( 'width','500px');
  $('t').set('status',1);
 }
 else
 {
    $('t').tween( 'width','100px');
    $('t').set('status',0);
  }
 });	
});
</script>
<div id="t" status="0">
</div>
<input type="button" id="btn" value="方法1" />
<input type="button" id="dh_btn" value="方法2" />

知识点：这里主要的知识点就是$('t').tween( 'width','100px');和var newTween = new Fx.Tween(newTweenElement);
 newTween.start('width', '100px', '300px');
的应用，其他的知识点以前都介绍过，这里就省略了。

原创文章，转载请注明来源：asp编程网（www.aspbc.com），谢谢。