mootools【十二】- 多彩的开始2

         这些天有点事情比较忙，几天没更新了Blog了。不能让这个mootools的学习文章半途而废了。
       上回说到mootools的Fx.Base类，它是mootools效果库Fx的基础，而我们平时会使用最频繁的，就是Fx.Style类，它是直接继承了Fx.Base类的。这个效果类非常强大，基本上可以实现对CSS样式中任何一个属性的过渡变换。
       Fx.Base中提供的方法在Fx.Style中都能用，用法是相同的，其他扩展的方法如下：

方法：hide
作用：如同调用Fx.Base的set方法，并且参数为0（即set(0)）,当效果作用在opacity,或者width,height(overflow需要是hidden)的时候,调用这个方法的效果是隐藏元素。

js 代码

 

1. var myFx = $('myDiv').effect('width', {duration: 1000});  
2. myFx.hide();  

方法：start
作用：在两个区间之间进行过渡变换，和Fx.Base的start用法一样。

js 代码

 

1. var marginChange = new Fx.Style('myElement', 'margin-top', {duration:500});  
2. marginChange.start(10);     //从myElement当前的margin-top值过渡到10  
3. marginChange.start(1,20);  //myElement的margin-top值从1过渡到20  

由于Fx.Style的引入，Element又被扩展了一个实现效果的快捷方法： effect
具体用法如下：

js 代码

 

1. var myEffect = $('myElement').effect('height',{
2.     duration: 1000, transition: Fx.Transitions.linear
3. });  
4. myEffect.start(10, 100);  

想实现同时进行多个效果怎么做？方便，Fx.Styles就是提供这样功能的一个类，它也是直接继承了Fx.Base的类，你可以像这样来使用它：

js 代码

 

1. var myFx = new Fx.Styles('myDiv', {duration: 1000});  
2. myFx.start({  
3.     'width':[100,300],  
4.     'height':[100,200]  
5. });  

十分简单明了。

同样，Effect由此多了一个effects快捷方法，可以这样使用：

js 代码

 

1. var myFxs= $(myElement).effects({duration: 1000, transition: Fx.Transitions.sineInOut});  
2. myFxs.start({  
3.     'height': [10, 100],   
4.     'width': [900, 300]  
5. });  

另外，除了上面的两个类之外，还有一个可以用来作转换效果的类：Fx.Elements，这个类可以按照指定的元素顺序来执行指定的效果，就像这样：

js 代码

 

1. var myElementsEffects = new Fx.Elements($$('a'));  
2. myElementsEffects.start({  
3.        '0': {                                 //对第一个元素执行opacity和width的过渡变化  
4.         'opacity': [0,1],  
5.          width': [100,200]  
6.     },  
7.     '1': {                               //对第二个元素执行opacity过渡变换  
8.         'opacity': [0.2, 0.5]  
9.     }  
10. });  

差不多就这样了，不过别看就这么些东西，但是它们提供的功能足够强大，好好使用他们吧:)。