jQuery 导航菜单

这几天一直忙于帮别人弄点小东西，这次用到了jQuery

以前我都是用原生 JavaScript 敲的代码, 一方面是为了读者更好地去理解其中的原理, 另一方面是让程序可以在不加载任何 framework 的情况下正常运行. 但是时间长了, 我发现越来越多人问我如何将这些效果集成到一些 JS 框架上, 尤其是 jQuery. 所以我这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.

二级导航菜单
鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
 
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
 
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
			}
 
		);
	});
});

淡出淡入导航菜单
鼠标悬停显示淡入显示菜单, 离开淡出隐藏菜单. 需要加上延迟处理, 原因请参考请参考如下文章.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
 
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			}
 
		);
	});
});

滚动导航菜单
鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},
 
			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}
 
		);
	});
});