animate

英[??n?me?t] 美[??n??met]

vt. アニメーション化する; 駆動(dòng)する; 本物のような動(dòng)きをする; 生命を與える…

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

jquery animate()方法 構(gòu)文

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

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

パラメータ:

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

## 構(gòu)文 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 スタイルと値を指定します (上記と同じ)。
オプション。アニメーションの追加オプションを指定します??赡埭蕚? 速度 - アニメーションの速度を設(shè)定します イージング - 使用するイージング関數(shù)を指定します コールバック - アニメーションの完了後に実行する関數(shù)を指定します ステップ - アニメーションの各ステップが完了した後に実行する関數(shù)を指定します キュー- ブール値。アニメーションをエフェクト キューに入れるかどうかを示します。 false の場合、アニメーションはすぐに開始されます。specialEasing - スタイル パラメータからの 1 つ以上の CSS プロパティのマップ、および対応するイージング関數(shù)

<abbr id="mpe50"></abbr>