jQuery 特定要素がアニメーション中か判別する方法

この記事は5年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。Toshikuraです。今回のTiosは【jQuery 特定要素がアニメーション中か判別する方法】です。随分局所的なTipsですが…先日作成した謎スライダーでも活躍していたのでメモしておきます。

実装方法

読み込み


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>


if($(‘#tgt’).is(‘:animated’)){
$(‘#flg’).text(‘Animate’);
}else{
$(‘#flg’).text(‘…’);
}

どのタイミングで判別させるかによって動作のタイミングが変わってきますのでお気をつけ下さい。

一定時間ごとに判別


setInterval(function(){
if($(‘#tgt’).is(‘:animated’)){
$(‘#flg’).text(‘Animate’);
}else{
$(‘#flg’).text(‘…’);
}
},100);

クリックで判別

$(function(){
$("#…").click(function(){
if($(‘#tgt’).is(‘:animated’)){
$(‘#flg’).text(‘Animate’);
}else{
$(‘#flg’).text(‘…’);
}
});
});

今回出てきました【is】はjqueryの中でもなかなか役に立つやつなので覚えておいてもいいかもしれせんね。これに関しては少し前に記事化していますので、もしよろしければ合わせてご参照ください。参照:jQuery isの利用方法 – 条件式を満たす場合に要素を操作

以上になります。