MooTools - Fx.Tween

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

tween()

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

示例

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         var tweenFunction = function(){
            $('body_div').tween('width','300px');
         }
         
         window.addEvent('domready', function() {
            $('tween_button').addEvent('click', tweenFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "tween_button" value = "Set Width to 300 px"/>
   </body>
   
</html>

您将收到以下输出 −

输出

fade()

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

示例

<!DOCTYPE html>
<html>

   <head>
      <style>
         #body_div {
            width: 100px;
            height: 200px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/JavaScript">
         var fadeFunction = function(){
            $('body_div').fade('.5');
         }
         
         window.addEvent('domready', function() {
            $('fade_button').addEvent('click', fadeFunction);
         });
      </script>
   </head>
   
   <body>
      <div id = "body_div"> </div><br/>
      <input type = "button" id = "fade_button" value = "fade to 50%"/>
   </body>
   
</html>

您将收到以下输出 −

输出

点击淡化至 50% 按钮可将 div 不透明度降低至 50%。

highlight()

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

• 在第一个功能中，Tween Flash 用于将不同的背景颜色应用于元素。

• 一旦 Tween Flash 设置了不同的背景颜色，它就会切换到另一种背景颜色。

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

示例

<!DOCTYPE html>
<html>

   <head>
      <style>
         #div1 {
            width: 100px;
            height: 100px;
            background-color: #1A5276;
            border: 3px solid #dd97a1;
         }
         #div2 {
            width: 100px;
            height: 100px;
            background-color: #145A32;
            border: 3px solid #dd97a1;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         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);
         });
      </script>
   </head>
   
   <body>
      <div id = "div1"> </div><br/>
      <div id = "div2"> </div>
   </body>
   
</html>

您将收到以下输出 −

输出

尝试将鼠标指针保持在彩色 div 上，并观察 Flash 高亮中的变化。