Menu

STEP 5 - animate()メソッドと css()メソッドを使ってスライドを表現

animate()メソッドとcss()メソッドを使って、アニメーションを作成しています。

jQuery Code

$(function(){
	$("#dropdown li").each(function(){
		var subMenu = $("> ul", this);
		var defaultHeight = subMenu.height();
		$(this).hover(function(){
			if ( subMenu.css("display") == "none" ){
				subMenu.slideDown("fast", function(){
					subMenu.css("overflow", "visible");
				});
			} else {
				subMenu.stop().animate({
					"height": defaultHeight
				}, "fast", function(){
					subMenu.css("overflow", "visible");
				});
			}
		},
		function(){
			subMenu.stop().slideUp("fast");
		});
	});
	$("#dropdown ul").hide();
});

jQuery.com 公式ドキュメント

Chapter 14