animate

英[ˈænɪmeɪt] 美[ˈænəˌmet]

vt. アニメーション化する; 駆動する; 本物のような動きをする; 生命を与える…

adj. 生きている; 生きている; 生き生きとした; 活発な

jquery animate()方法 構文

関数: animate() メソッドは、CSS プロパティ セットのカスタム アニメーションを実行します。このメソッドは、CSS スタイルを通じて要素をある状態から別の状態に変更します。 CSS プロパティの値が徐々に変化し、アニメーション効果を作成できます。アニメーション化できるのは数値のみです（例：「margin:30px」）。文字列値はアニメーション化できません（「background-color:red」など）。相対アニメーションを作成するには、「=」または「-=」を使用します。

構文 1: $(selector).animate(styles,speed,easing,callback)

パラメータ:

#パラメータ説明スタイル 必須。アニメーション効果を生成する CSS スタイルと値を指定します。 速度 オプション。アニメーションの速度を指定します。デフォルトは「通常」です。可能な値: ミリ秒 (例: 1500) 「遅い」 「通常」 「速い」 イージング オプション。さまざまなアニメーション ポイントでアニメーション速度を設定するイージング関数を指定します。組み込みのイージング関数: スイング リニア エクステンションには、より多くのイージング関数が提供されています。 コールバック オプション。 animate 関数の実行後に実行される関数。

## 構文 2: $(selector).animate(styles,options)

パラメータ:

パラメータ スタイル オプション

jquery animate()方法 例

<html>
<head>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $(".btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $(".btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;">
</div>
<button class="btn1">Animate</button>
<button class="btn2">Reset</button>
</body>
</html>
インスタンスの実行 »

[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します

説明
必須。アニメーション効果を生成する CSS スタイルと値を指定します (上記と同じ)。
オプション。アニメーションの追加オプションを指定します。可能な値: 速度 - アニメーションの速度を設定します イージング - 使用するイージング関数を指定します コールバック - アニメーションの完了後に実行する関数を指定します ステップ - アニメーションの各ステップが完了した後に実行する関数を指定します キュー- ブール値。アニメーションをエフェクト キューに入れるかどうかを示します。 false の場合、アニメーションはすぐに開始されます。specialEasing - スタイル パラメータからの 1 つ以上の CSS プロパティのマップ、および対応するイージング関数