株式会社blow-in

ブログ

WEB制作に関する技術情報やサンプルコードからエクセルや
パワーポイントのお役立ち情報まで幅広くご紹介しています。

ページ表示時にボタンが順番にスライドイン＆フェードイン

ページが表示された際に、左から順番にスライドイン＆フェードインするナビゲーションを作成してみました。
サイトのちょこっとした演出にいかがでしょうか？

jquery

$(window).load(function(){
	//スライドインのスピード
	var SlideIn = 150;
	//フェードインのスピード
	var FadeIn = 800;
	$('ul li').each(function(i){
		$(this).delay(i*(SlideIn)).css({display:'block',opacity:'0',top:'0'}).animate({opacity:'1',top:'30'}).animate({top:'25'},FadeIn);
	});
});