jQueryのanimateメソッド

これまでのレッスンで取り上げたすべてのメソッドは、 いくらか制限があります - それらは作成された目的通りに動作します。 アニメーションをより細かく制御したい場合は、汎用的なメソッド animate を使用してください。

このメソッドの第一引数はオブジェクトを取り、 アニメーションさせたいCSSプロパティの新しい値を指定します。 第二引数は、アニメーションの実行時間です。

次のHTMLコードを用いて、このメソッドを実装してみましょう:

html<button id="button">click me</button>
<div id="elem">text...</div>

CSSは次のようになっているとします:

css#elem {
  width: 150px;
  height: 150px;
  padding: 10px;
  border: 1px solid green;
}

ボタンをクリックすると、要素が次のサイズまで縮小するようにしましょう: 高さ - 50px、幅 - 100px:

javascript$('#button').click(function() {
  $('#elem').animate({height: 50, width: 100}, 1000);
});

値が height: '+=50' という形式で指定された場合、 アニメーションは次のように動作します: 現在の高さに 50px (この例では) が加算され、 要素は新しい値まで滑らかにアニメーションします。 例を見てみましょう:

javascript$('#button').click(function() {
  $('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});

animateメソッドの詳細については、jQueryのリファレンスをご覧ください。

html<body>
  <div id="block"></div>
</body>

cssdiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  cursor: pointer;
  margin-bottom: 20px;
}