jQueryを使用してページのアニメーション効果を実現する（インスタンスコード）

アニメーション効果を実現するための多くの関数がありますが、その中でanimate関数は最も一般的な関数の1つです。以下は、その使用方法の簡単な説明です。

animate関数の基本的な形式

animateを使用してアニメーション効果を実現する基本的な形式は：

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

ここでの{params}は必須項目で、これは、アニメーションが指定された要素を通じて実行される後、その要素が持つべきCSSスタイルを示すオブジェクトです。speedおよびcallbackはオプションです。その中でspeedはアニメーションの速度を指定し、値は数値型（例えば1000でアニメーションが1s内にparamsで指定されたスタイルに変換される）、slowおよびfastです。callbackはアニメーションが終了した後に実行される関数を指定します。

コード例：

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.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>
</html>

{params}オブジェクトの変数の複数の設定形式

{params}オブジェクトの変数には、以下の形式で設定できます。

絶対値形式

上記のコード例では、paramsオブジェクトに絶対値形式で値を設定しています。

相対値形式

例えば、変数値の前に「+”“-”など。

コード例：

<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   height:'+=150px',
   width:'+=150px'
  });
 });
});
</script>

show、hideおよびtoggle

paramsオブジェクトの変数値は、以下の3つの値に設定することができます。以下の例のコードは、divタグの内容を非表示にする効果があります。

$("button").click(function(){
 $("div").animate({
  height:'toggle'
 });
});

このページのアニメーション効果を実現するjQueryの例（実例コード）が、編集者が皆さんに提供する全ての内容です。皆さんに参考になれば幸いですし、呐喊教程を多くのサポートをいただけると嬉しいです。

基礎教程