jQueryのfadeToを使って要素を指定した透明度の範囲で点滅させる方法

jQueryを使って指定した要素を点滅させるのに少しハマったのでメモがてら解決方法を書いておきます。

jQueryを使った要素点滅はfadeIn()とfadeOut()を使った方法が有名ですが、fadeIn()とfadeOut()は要素の透明度を調節することができません。

なので今回紹介するのは透明度の調節ができるfadeTo()を使って要素を点滅させる方法です。

(function pulse(){
	var speed = 500;
	var alpha = 0.5;
	$('.element_name').fadeTo(speed ,alpha).fadeTo(speed,1,function(){pulse()});
})();

当初はsetInterval()やsetTimeout()を使って点滅をさせていたのですが、なぜか途中で点滅が止まってしまうバグが発生しました。

そこで２回めのfadeTo（つまりフェードイン）のコールバックで再帰的に自分を呼び出す方法に変更したところ動作が安定しました。

どうやらfadeToとset〜関数の相性があまりよろしくないようなので、特に問題なければこの方法を採用するのがよろしいかと思います。