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)的时候,调用这个方法的效果是隐藏元素。

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

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

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

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

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

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

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

十分简单明了。

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

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

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

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

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