スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQuery1.4のdelay()を使って滑らかに広がるプルダウンメニュー

jQuery1.4でdelayができるようになったので、なめらかに広がるプルダウンメニューを作ってみました

子要素が現れるアニメーションに少しずつ時差をつけています。

.delay( duration, [ queueName ] )

.delay() – jQuery API

demo

サンプルページ(場所がなかったからdropboxだけど

js

function delaymenu(){
	$(".navGlobalLayer2 li a").fadeTo(0,0);
	$(".navGlobalItem").hover(
		function() {
			var itemarea = $(this).find('.itemarea');
			itemarea.each(
				function(i){
					$(this).stop().css('display','block').delay(i*45).fadeTo('normal',1);
				}
			);
		} ,
		function() {
			var itemarea = $(this).find('.itemarea');
			itemarea.stop().fadeTo(
				'fast',
				0,
				function(){
					itemarea.css('display','none');
				}
			);
		}
	);
}
スポンサーサイト

comment

Secret

RSS
  • 最近記事のRSS
最新記事
カテゴリ
月別アーカイブ
コンタクト

名前:
メール:
件名:
本文:

Ads
検索フォーム
プロフィール

gryng

gryng

MEやってます。twitter

Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。