tande lab.

[jQuery] アニメーションでコールバック関数を入れ子する

jQuery で指定できるメソッドには、コールバック関数を引数にとるものがあります。

良く使いそうな例だと

fadeTo(speed, opacity, [callback]) – jQuery 日本語リファレンス

とか

animate(params, [duration], [easing], [callback]) – jQuery 日本語リファレンス

あたり、です。

このコールバック関数、ひとつじゃ足りないよ!って思うことがしばしば。
そんなときは、以下のように

$(this)
	.find(".copied")
	.fadeTo("slow", 1, function(){
		$(this).fadeTo("slow", 0, function(){
			$(this).css({display: "none"});
		})
	});

コールバック関数に、

function(){…}

を突っ込んで、{…} 内に処理を記述して入れ子にしてしまえばOK。

上の例だと、fadeTo メソッドのコールバック関数に $(this).fadeTo(…) を突っ込み、そのメソッドのコールバック関数に更に $(this).css(…) を指定するという、入れ子に入れ子している状態。

function(){

で改行するようにして記述するとコードもキレイで読みやすい。
もっとスマートな方法あるのかもしれませんが、とりあえず。




0 comments
Submit comment