MooTools - Fx.Events

Fx.Events menyediakan beberapa opsi untuk menaikkan beberapa kode pada level yang berbeda di seluruh efek animasi. Ini memberi Anda kendali atas remaja dan morph Anda. Opsi yang disediakan Fx.Events -

onStart - Ini akan menaikkan kode untuk dieksekusi ketika Fx dimulai.
onCancel - Ini akan menaikkan kode untuk dieksekusi ketika Fx dibatalkan.
onComplete - Ini akan menaikkan kode untuk dieksekusi ketika Fx selesai.
onChainComplete - akan menaikkan kode untuk dieksekusi ketika Fx yang dirantai selesai.

Contoh

Mari kita ambil contoh dimana, ada div di halaman web. Kami melanjutkan dengan menerapkan metode Peristiwa ke div. Metode pertama adalah metode onStart () untuk menyorot div saat penunjuk mouse masuk ke dalam area div.

Yang kedua adalah metode onComplete () yang menyoroti div saat penunjuk tetikus meninggalkan area div. Dan ketika penunjuk mouse masuk ke dalam area div secara otomatis ukuran div bertambah 400px. Kami akan mencoba untuk menjalankan semua fungsi ini menggunakan metode Fx.Events. Perhatikan kode berikut.

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

Anda akan menerima output berikut -

Keluaran