デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:animatedアニメしている要素を選択

構文

アニメしている要素を選択
$(":animated")ver1.2〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてanimatedを設定すると現在アニメしている要素を選択します。

解説

アニメしている要素の選択

サンプル(animated/01.html)を開いてbody内の構成を確認してください。div要素とspan要素が2つづつ有り、各要素とも一方にmoveのclass属性が設定されています。つづいてjQueryを確認すると、以下の部分でclass属性がmoveの要素をanimateメソッドを利用してアニメをループさせています。

animateメソッドのページではないので詳しくは説明しませんが、アニメが一通り終わったら再びmoveFuncを実行することでアニメを繰り返しています。

function moveFunc(){
 $(".move").animate({left:100}).animate({left:0},{complete:moveFunc});	
}

body内の最後にbuttonが配置され、これをクリックするとjQueryの以下の部分が実行されます。セレクタの部分に:animatedが設定されているため、buttonをクリックすると現在アニメしている要素が選択されます。選択された要素に対しcssメソッドを利用して背景色をピンクに変更しています。

$("button").click(function(){
	$(":animated").css("background-color","#FCC");
});

結果としてdiv要素、span要素を問わずアニメしている2つの要素の背景が変更されます。

他のセレクタと組みあわせる

:animateを他のセレクタと組みあわせたサンプルも確認しましょう。サンプル(animated/02.html)開いてbody内の構成はanimated/01.htmlから変更がないことを確認して下さい。jQueryはセレクタの部分に複数のセレクタ(and)を利用してspan要素と組みあわせました。

$("button").click(function(){
	$("span:animated").css("background-color","#FCC");
});

そのためspan要素で現在アニメしているものだけが選択されるようになります。