MooTools-Fx.Tween

MooToolsは、滑らかなアニメーション化されたトランジションに変換される派手なエフェクトなど、さまざまなトランジション用のさまざまなFX.Tweenショートカットを提供します。 Tweenショートカットのいくつかの方法について説明しましょう。

tween（）

このメソッドは、2つのスタイルプロパティ値間のスムーズな移行を提供します。 tweenメソッドを使用してdivの幅を100pxから300pxに変更する例を見てみましょう。次のコードを見てください。

例

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

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

出力

フェード（）

このメソッドは、要素の不透明度または透明度を調整します。 MooToolsを使用してdivの不透明度を調整するボタンを提供する例を見てみましょう。次のコードを見てください。

例

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

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

出力

[50％にフェード]ボタンをクリックして、divの不透明度を50％に減らします。

highlight（）

このメソッドは、異なる背景色を使用して要素を強調表示します。 Tween Flashの2つの主要な機能が含まれています。

最初の機能では、Tween Flashを使用して要素に異なる背景色を適用します。
Tween Flashが異なる背景色を設定すると、別の背景色に切り替わります。

このメソッドは、選択後に要素を強調表示するために使用されます。この方法を理解するために例を見てみましょう。次のコードを見てください。

例

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

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

出力

色付きのdiv上にマウスポインターを置いて、フラッシュのハイライトの変化を観察してみてください。

Mootools-fxtween

目次

MooTools-Fx.Tween

tween（）

例

出力

フェード（）

例

出力

highlight（）

例

出力