jQueryカスタムアニメーション関数

jQuery アニメーション - animate() メソッド

jQuery animate() メソッドは、カスタムアニメーションを作成するために使用されます。

構文:

$(selector).animate({params},speed,callback);

必須の params パラメータは、アニメーションを形成する CSS プロパティを定義します。

オプションの速度パラメーターは、エフェクトの持続時間を指定します。「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメーターは、アニメーションの完了後に実行される関数の名前です。

次の例は、animate() メソッドの単純なアプリケーションを示しています。左属性が 250 ピクセルになるまで、<div> 要素を左に移動します。 a 静的な位置であり、移動することはできません。位置を操作したい場合は、最初に要素の CSS 位置プロパティを相対、固定、または絶対に設定することを忘れないでください。

QQ截图20161024092524.png

jQuery animate() - 複数のプロパティを操作します

アニメーション生成プロセス中に複数のプロパティを同時に使用できることに注意してください:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({left:'250px'});  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

ヒント: animate() メソッドを使用できます。ただし、すべての CSS プロパティを操作するには、覚えておくべき重要な点が 1 つあります。animate() を使用する場合、すべてのプロパティ名は Camel 表記法を使用して記述する必要があります。たとえば、padding-left の代わりに paddingLeft を、margin- の代わりに marginRight を使用する必要があります。そうですね、などまた、カラーアニメーションは、コアの jQuery ライブラリには含まれていません。カラーアニメーションを生成する必要がある場合は、jQuery.com からカラーアニメーションプラグインをダウンロードする必要があります。

QQ截图20161024092556.png

jQuery animate() - 相対値の使用

相対値を定義することもできます (値は要素の現在の値に対する相対値です)。値の前に += または -= を追加する必要があります:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>  
 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      opacity:'0.5',  
      height:'150px',  
      width:'150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>

jQuery animate() - 事前定義された値を使用します

プロパティの値をアニメーション化して「表示」、「非表示」、または「切り替え」することもできます:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      left:'250px',  
      height:'+=150px',  
      width:'+=150px'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092639.png

jQuery animate() - キュー関数の使用

デフォルトでは、jQuery はアニメーション用のキュー関数を提供します。これは、複数の animate() 呼び出しを続けて記述すると、jQuery がそれらのメソッド呼び出しを含む「内部」キューを作成することを意味します。次に、これらのアニメーション呼び出しを 1 つずつ実行します。

例: 別々のアニメーションを次々に実行したい場合は、キュー機能を利用したいです

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> 
<script>  
$(document).ready(function(){  
  $("button").click(function(){  
    $("div").animate({  
      height:'toggle'  
    });  
  });  
});  
</script>  
</head>  
<body>  
<button>开始动画</button>  
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>  
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">  
</div>  
</body>  
</html>

QQ截图20161024092702.png

学び続ける

新しいファイル

<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"/> <title>jQuery Animation - fadeTo </title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("#divPop").animate( { "opacity": "hide", "width": $(window).width()-100 , "height": $(window).height()-100 }, 2000 ); }); </script> </head> <body> <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; width: 300px; height: 100px; position:absolute;"> <div style="text-align: center;">pop div</div> </div> </body> </html>

提出するリセットコード

自動運転