MooTools - Fx.Tween

MooTools Fx.Tween - 从简介，安装，程序结构，选择器，使用数组，函数，事件处理，DOM操作，样式属性，输入过滤，拖放，正则表达式，期刊，滑块，可排序，手风琴，开始学习MooTools工具提示，选项卡式内容，类，Fx.Element，Fx.Slide，Fx.Tween，Fx.Morph，Fx.Options，Fx.Events。

MooTools为不同的过渡提供了不同的FX.Tween快捷键，例如闪光效果，可转换为平滑的动画过渡效果.让我们讨论Tween快捷方式中的一些方法.

tween()

此方法提供两个样式属性值之间的平滑过渡.让我们举一个使用补间方法将div的宽度从100px更改为300px的示例.请看下面的代码.

示例

                                                var tweenFunction = function(){            $('body_div').tween('width','300px');         }                  window.addEvent('domready', function() {            $('tween_button').addEvent('click', tweenFunction);         });

fade()

此方法调整元素的不透明度或透明度。让我们举一个例子，其中，我们提供了一个按钮，用于使用MooTools调整div的不透明度。看一下下面的代码。

Example

                                                var fadeFunction = function(){            $('body_div').fade('.5');         }                  window.addEvent('domready', function() {            $('fade_button').addEvent('click', fadeFunction);         });

单击淡入为50％按钮可将div的不透明度降低为50％。

highlight()

此方法使用不同的背景颜色突出显示元素。它包含Tween Flash的两个主要功能。

在第一个功能中，补间动画用于将不同的背景颜色应用于元素。
补间动画设置了不同的背景颜色后，便会切换为另一种背景颜色。

选择后，此方法用于突出显示元素。让我们以一个例子来理解这种方法。看一下下面的代码。

Example

                                                var highlightFunction = function(){            $('div1').highlight('#eaea16');         }                  var highlightChangeFunction = function(){            $('div2').highlight('#eaea16', '#FBFCFC');         }                  window.addEvent('domready', function() {            $('div1').addEvent('mouseover', highlightFunction);            $('div2').addEvent('mouseover', highlightChangeFunction);         });

尝试保留鼠标指针在彩色div上，并观察闪光灯高光的变化.