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 代码

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

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

js 代码

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
具体用法如下：

js 代码

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

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

js 代码

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

十分简单明了。

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

js 代码

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

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

js 代码

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

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