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 上，并观察闪光高亮显示的变化。

打印页面