jQuery 基本フィルタ（7） 「:animated」フィルタ

アニメーション処理中の要素を抽出します。

以下サンプルを示します。

<title>基本フィルタ</title>



$(function(){
        $("#second").hide();
        $("#second").show(1000);
        // アニメーション中の要素の背景をピンクに
        $(":animated").css("background", "pink");
});



<h3>japan</h3>
<div id="first">
<p>zack japan</p>
<p>kamo japan</p>
<p>torushie japan</p>
</div>
<h3>fruit</h3>
<div id="second">
<p>orange</p>
<p>lemon</p>
<p>apple</p>
<p>peach</p>
</div>
<h3>animal</h3>
<div id="third">
<p>lion</p>
<p>puma</p>
</div>

<title>基本フィルタ</title>

$(function(){

$("#second").hide();

$("#second").show(1000);

// アニメーション中の要素の背景をピンクに

$(":animated").css("background", "pink");

});

<h3>japan</h3>

<p>zack japan</p>

<p>kamo japan</p>

<p>torushie japan</p>

</div>

<h3>fruit</h3>

<p>orange</p>

<p>lemon</p>

<p>apple</p>

<p>peach</p>

</div>

<h3>animal</h3>

</div>

以下の処理の説明は以下になります。
・1行目でid属性に”second”を持つ要素を非表示にします。
・2行目でid属性に”second”を持つ要素を表示します。
この時”show(1000)”となっているので、1000ミリ秒かけて表示を行います。
・3行目では全ての要素の中からアニメーション中の要素を抽出し、それに対し
背景にピンクを設定しています。
ここでは2行目の処理がまだ途中であるはずなので、id属性に”second”を持つ
要素の背景がピンクになります。

$("#second").hide();
$("#second").show(1000);
$(":animated").css("background", "pink");

$("#second").hide();

$("#second").show(1000);

$(":animated").css("background", "pink");