MooTools - Fx.Tween

MooTools 为不同的过渡提供了不同的 FX.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>

您将收到以下输出 -

输出

褪色（）

此方法调整元素的不透明度或透明度。让我们举一个例子，其中我们提供了一个按钮来使用 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%。

强调（）

此方法使用不同的背景颜色突出显示元素。它包含 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 上并观察闪光高光的变化。