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 上，並觀察閃光高亮顯示的變化。

列印頁面