MooTools - Fx.Tween

MooTools fornisce diverse scorciatoie FX.Tween per diverse transizioni come effetti appariscenti che si traducono in transizioni animate fluide. Parliamo di alcuni metodi dalle scorciatoie Tween.

gemello()

Questo metodo fornisce transizioni fluide tra due valori di proprietà di stile. Prendiamo un esempio che utilizza il metodo tween per modificare la larghezza di un div da 100px a 300px. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione

dissolvenza ()

Questo metodo regola l'opacità o la trasparenza dell'elemento. Facciamo un esempio in cui forniamo un pulsante per regolare l'opacità di un div utilizzando MooTools. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione

Clicca sul fade to 50% button per ridurre l'opacità div al 50%.

evidenziare()

Questo metodo evidenzia un elemento utilizzando diversi colori di sfondo. Contiene due funzionalità principali di Tween Flash.

  • Nella prima funzionalità, Tween Flash viene utilizzato per applicare diversi colori di sfondo agli elementi.

  • Una volta che Tween Flash ha impostato un colore di sfondo diverso, passa a un altro colore di sfondo.

Questo metodo viene utilizzato per evidenziare un elemento dopo la selezione. Facciamo un esempio per capire questo metodo. Dai un'occhiata al seguente codice.

Esempio

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

Riceverai il seguente output:

Produzione

Cerca di mantenere il puntatore del mouse sui div colorati e osserva i cambiamenti nelle luci flash.