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

こんにちは、坂本です。

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

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

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

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()が実行されます。

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