jQueryのセレクタ 基本フィルタ2



:animated アニメーション中

現在アニメーション動作中の要素にマッチします。

下記のボタンをクリックしてみてください。


 


アニメーション中に下のボタンを押すと背景色が赤になりますが、停止中だと変わりません。

ソースは次の通りです。
<style>
#ani1 {
  position:relative; 
  width:120px ; height:40px;
  margin:12px;
  background:gold;
}
</style>

<button id="doani">アニメーションします</button>
<button id="chg">
アニメーション中の要素の背景色を赤にします
</button>

<!-- この要素がアニメーションします -->
<div id="ani1"></div>

<script type="text/javascript">
jQuery(function($){

  $("#doani").click(function () { 
    function runIt() {
      $("#ani1").css("background-color","gold")
                .show("slow") 
                //アニメーションします  
                .animate({left:'+=400'},2000) 
                .animate({left:'-=400'},2000) 
    }
    runIt();
  });

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

});
</script>
上記では、id="#chg"のボタンをクリックすると、 :animatedセレクタにより、ページ内で「アニメーション中」の要素を検索し、背景色を赤にします。

このサンプルでは、クリックイベントをbutton要素のインラインへ書かずにスクリプトで書いていますが、 jQueryのイベントについては イベントの割り当てAPI/1.2/Eventsなどをご参照ください。



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。