:animated【アニメーション要素】

メモ

  • アニメーション中の要素を選択
    • 効果(Effects)モジュール無のjQuery使用の場合、例外が発生
    • ネイティブ DOM querySelectorAll() 未使用の為、低速
      純粋なCSSセレクタを使用後、 .filter(":animated") とした方が高速

構文

jQuery( ":animated" )1.0

関連

例

<style>
.border { width:200px; height:50px; border:1px black solid; background-color:yellow; text-align:center; padding-top:25px; }
</style>

<p><button id="buttonAnimated" type="button">アニメーション要素 変更</button></p>
<div id="id1" class="border">アニメーション あり</div>
<div id="id2" class="border">アニメーション なし</div>
<div id="id3" class="border">アニメーション あり</div>

<script>
var flag = false;

$("#buttonAnimated").click(function() {
  flag = ! flag;
  var color = (flag) ? "cyan" : "yellow";
  $(".border:animated").css("background-color", color);
});

function animation() {
  $("#id1").fadeToggle(2000);
  $("#id3").fadeToggle(2000, animation);
}

animation(); // アニメション開始
</script>

アニメーション あり
アニメーション なし
アニメーション あり