MooTools - Fx.Events

Fx.Events fournit des options pour élever certains codes à différents niveaux tout au long de l'effet d'animation. Il vous permet de contrôler vos préadolescents et vos morphs. L'option fournie par Fx.Events -

onStart - Cela augmentera le code à exécuter lorsque le Fx démarre.
onCancel - Cela augmentera le code à exécuter lorsque le Fx est annulé.
onComplete - Il augmentera le code à exécuter lorsque le Fx sera terminé.
onChainComplete - lèvera le code à exécuter lorsque le Fx chaîné se termine.

Exemple

Prenons un exemple dans lequel, il y a des divs sur la page Web. Nous procédons en appliquant les méthodes Event aux divs. La première méthode est la méthode onStart () pour mettre en surbrillance le div lorsque le pointeur de la souris entre dans la zone div.

Le second est la méthode onComplete () qui met en évidence le div lorsque le pointeur de la souris quitte la zone div. Et lorsque le pointeur de la souris entre automatiquement dans la zone div, la taille div augmente de 400 px. Nous allons essayer d'exécuter toutes ces fonctionnalités en utilisant les méthodes Fx.Events. Jetez un œil au code suivant.

<!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>

Vous recevrez la sortie suivante -

Production