アニメーション中かどうか判別する

if文で、要素がアニメーション中かどうかを判別してみます。

サンプルコード

HTML

<button id="btn">アニメーション中か判定</button>
<div id="sample"></div>

CSS

#sample {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 100px;
	height: 100px;
	background: #cccccc;
}

JavaScript

$(function() {
	// 一定時間毎にアニメーションする
	setInterval(function() {
		$('#sample').animate({
			left: 200
		}, 1000).animate({
			left: 50
		}, 1000);
	}, 3000);

	// ボタンクリック時にアニメーション中かどうか判定
	$('#btn').on('click', function() {
		if($('#sample').is(':animated')) {
			console.log('アニメーション中です。');
		} else {
			console.log('アニメーション中ではありません。');
		}
	});
});

アニメーション中かどうか判別するデモページ
.is(‘:animated’)を使って、アニメーション中かどうか判定しています。
　

【参考サイト】

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