読者です 読者をやめる 読者になる 読者になる

とある平凡な人の日記

自分のインプットのためのブログです。日記は「日記」カテゴリにあります。あとはおススメ書籍やメモ的用途に。

jqueryでアニメーションが止まらないときの対処法

jQuery

こんにちは、坂本です。

サイトリニューアルをしているときに
jqueryのアニメーションが止まらない!!」
という壁にぶち当たりました。

初心者的な問題なのですが、うまい調べ方がわからない!
ということで、この本を読みました。

jqueryならこの本を読めば大体わかるそうです。(知り合い談)

私は辞書代わりに使っているのですが、基本を学ぶには良いと思います。

 

さて、本題へ。

一つの命令(function)にアニメーション(動き)を同時にしていすると

どうなるか?

 

ずっと動きが止まらなくなります。

 

それを解決するのが「:not(animated)」です。

詳しいことは全部書くと本の意味がないので、検索でお願いいたします。

 

$(function(){
   $(".circle,.circle p").on("click",function(){
		$(".sp_nav li a:not(:animated)").fadeIn();
	});
});

$(function(){
	$(".circle,.circle p").on("click",function(){
		$(".sp_nav li a:not(:animated)").fadeOut();
	});
});

こう書くことによって、要素がアニメーションしていないときにだけfadeIn()、fadeOut()が実行されます。

つまり「何かしらのアニメーションが行われているときには、アニメーションを行わない」という処理を加えました。