MooTools - Fx.Events

Fx.Events 提供了一些選項，可用於在動畫效果的不同級別引發一些程式碼。它讓你能夠控制物件變形和形態。Fx.Events 提供的選項 −

onStart − 它將引發在 Fx 開始時執行的程式碼。
onCancel − 它將引發在取消 Fx 時執行的程式碼。
onComplete − 它將引發在完成 Fx 時執行的程式碼。
onChainComplete − 將引發在完成連結的 Fx 時執行的程式碼。

示例

讓我們來看一個示例，其中網路頁面上有一些 div。我們繼續向 div 應用事件方法。第一個方法是 onStart() 方法，可以在滑鼠指標進入 div 區域時突出顯示 div。

第二個方法是 onComplete() 方法，可以在滑鼠指標離開 div 區域時突出顯示 div。當滑鼠指標自動進入 div 區域時，div 大小會增加 400px。我們將嘗試使用 Fx.Events 方法執行所有這些功能。請看以下程式碼。

<!DOCTYPE html>
<html>

   <head>
      <style>
         #quadin {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
         #quadout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
         #quadinout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px solid #808B96;
         }
      </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 enterFunction = function() {
            this.start('width', '400px');
         }
         var leaveFunction = function() {
            this.start('width', '200px');
         }
         
         window.addEvent('domready', function() {
            var quadIn = $('quadin');
            var quadOut = $('quadout');
            var quadInOut = $('quadinout');
            
            quadIn = new Fx.Tween(quadIn, {
               link: 'cancel',
               transition: Fx.Transitions.Quad.easeIn,
               
               onStart: function(passes_tween_element){
                  passes_tween_element.highlight('#C54641');
               },
               
               onComplete: function(passes_tween_element){
                  passes_tween_element.highlight('#E67F0E');
               }
            });
            
            quadOut = new Fx.Tween(quadOut, {
               link: 'cancel',
               transition: 'quad:out'
            });
            
            quadInOut = new Fx.Tween(quadInOut, {
               link: 'cancel',
               transition: 'quad:in:out'
            });
            
            $('quadin').addEvents({
               'mouseenter': enterFunction.bind(quadIn),
               'mouseleave': leaveFunction.bind(quadIn)
            });
            
            $('quadout').addEvents({
               'mouseenter': enterFunction.bind(quadOut),
               'mouseleave': leaveFunction.bind(quadOut)
            });
            
            $('quadinout').addEvents({
               'mouseenter': enterFunction.bind(quadInOut),
               'mouseleave': leaveFunction.bind(quadInOut)
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "quadin"> Quad : in</div><br/>
      <div id = "quadout"> Quad : out</div><br/>
      <div id = "quadinout"> Quad : in-out</div><br/>
   </body>
   
</html>

輸出結果如下 −

輸出

列印頁面