[ 勉強 ] 人様の書いたjQueryコードを読み解く

jQueryの勉強がてら、人様の書くjQueryコードを読んでいこうかと思います。完全に個人的な備忘録です。週一くらいで1スクリプトを見ていこうかと思います。

トップページへの戻りリンク

最初は簡単に、ページをスクロールするとトップページへの戻りリンクが現れるスクリプト。

Java Script

$(document).ready(function(){

	// hide #back-top first
	$("#back-top").hide();

	// fade in #back-top
	$(function () {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#back-top').fadeIn();
			} else {
				$('#back-top').fadeOut();
			}
		});

		// scroll body to 0px on click
		$('#back-top a').click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 800);
			return false;
		});
	});

});

memo

どうして、fade in #back-topのところで、$(function () {});、使ってるんだろう。いらなくない?

あと、こちらのブログ(スクロールでtopへ戻るボタンを表示するjQueryコード(スムーススクロール) | memocarilog)で、 $(‘#back-top’).stop().fadeOut();、というように.stop()入れないと不具合起こす、って書いてありましたが、確かにそうだなー、とは思いつつ、fadeInとfadeOutの境界線を高速でスクロールする人っているのかな?w。でもこういうアニメーションはちゃんとstop()入れないといけないですね。気をつけよう。

派生して、stop()を調べていたら、見つけたのでメモ。なるほどー。stop()は、stop([clearQueue], [gotoEnd])の2つの引数を持つのか。デフォルトの場合は両方false。

これを見ると、上記の場合はstop(true,false)が正しいのと思うのだけど、アニメーションのキューがひとつしかないので、stop(false,false)つまりstop()でも同様のうごきをするってことか。

[追記]
動作確認してたんですけど、stop(false,true).fadeOut()かstop(true,true).fadeOut()にしないと、背景が消える…。あと、fadeIn()にstop()を入れるときは、stop(false,false).fadeIn()かstop(true,false).fadeIn()にしないと、やはり背景が消えてしまうし、ちゃんとフェートアウトしてくれなくて、ぱっと消えてしまう。

[追記 2013/08/21]
そういえば、jQuery本にアニメーション時の不具合を解消する方法として、not(:animated)、を使うことが書いてありました。

not(:animated)はアニメーションをしていない時に実行する、という意味で、$(‘#back-top:not(:animated)’).fadeIn();、および、$(‘#back-top:not(:animated)’).fadeOut();というようにしたら結構うまくいきました。stop()使うよりnot(:animated)使ったほうが中途半端にアニメーションが実行されないのでよいと思います。

あと、背景が消えてしまう理由がわからなかったのですが、これも上記のjQuery本を読んでいる時に知ったのですが、fadeIn()あるいはfadeOut()はopacityの値を徐々に変更してフェード効果を出しているのですね!(そして、displayはnoneになる。)だから、背景が消えてしまうのも、上述したブログに書いてあるように、stop()で強制的に途中でアニメーションを止めてしまうので、途中で止めた時点のopacityの値が次回のopacityの値にセットされてしまうため、どんどん背景が消えてしまうという現状が起きていたようです。