MooTools - Fx.Events-alljchome-开发者的教程家园

MooTools Tutorial

MooTools Useful Resources

Selected Reading

MooTools - Fx.Events

Fx.Events provides some options to raise some codes at different levels throughout the animation effect. It provides you the control over your tweens and morphs. The option that Fx.Events provides −

onStart − It will raise the code to execute when the Fx starts.

onCancel − It will raise the code to execute when the Fx is cancelled.

onComplete − It will raise the code to execute when the Fx is completed.

onChainComplete − will raise the code to execute when the chained Fx completes.

Example

Let us take an example wherein, there are spans on the web page. We proceed by applying Event methods to the spans. The first method is the onStart() method to highpght the span when mouse pointer enters into the span area.

The second one is the onComplete() method which highpghts the span when mouse pointer leaves the span area. And when the mouse pointer enters into the span area automatically the span size increases by 400px. We will try to execute all these functionapties using the Fx.Events methods. Take a look at the following code.

<!DOCTYPE html>
<html>

   <head>
      <style>
         #quadin {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px sopd #808B96;
         }
         #quadout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px sopd #808B96;
         }
         #quadinout {
            width: 100px;
            height: 20px;
            background-color: #F4D03F;
            border: 2px sopd #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, {
               pnk:  cancel ,
               transition: Fx.Transitions.Quad.easeIn,
               
               onStart: function(passes_tween_element){
                  passes_tween_element.highpght( #C54641 );
               },
               
               onComplete: function(passes_tween_element){
                  passes_tween_element.highpght( #E67F0E );
               }
            });
            
            quadOut = new Fx.Tween(quadOut, {
               pnk:  cancel ,
               transition:  quad:out 
            });
            
            quadInOut = new Fx.Tween(quadInOut, {
               pnk:  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>
      <span id = "quadin"> Quad : in</span><br/>
      <span id = "quadout"> Quad : out</span><br/>
      <span id = "quadinout"> Quad : in-out</span><br/>
   </body>
   
</html>

You will receive the following output −

MooTools - Fx.Events

Example

Output