MooTools-Fx.Events

Fx.Eventsには、アニメーション効果全体を通して異なるレベルでいくつかのコードを上げるためのオプションがいくつかあります。トゥイーンとモーフを制御できます。 Fx.Eventsが提供するオプション-

onStart -Fxの起動時に実行するコードを生成します。
onCancel -Fxがキャンセルされたときに実行するコードを生成します。
onComplete -Fxが完了したときに実行するコードを生成します。
onChainComplete -チェーンされたFxが完了したときに実行するコードを生成します。

例

Webページにdivがある例を見てみましょう。イベントメソッドをdivに適用することから始めます。最初のメソッドは、マウスポインターがdiv領域に入ったときにdivを強調表示するonStart（）メソッドです。

2つ目は、マウスポインターがdiv領域を離れたときにdivを強調表示するonComplete（）メソッドです。そして、マウスポインターが自動的に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>

次の出力が表示されます-

出力

Mootools-fxevents

MooTools-Fx.Events

例

出力