jQuery渐变发光导航菜单的实例代码_jquery

• 
  菜单一菜单一
  


• 
  菜单二菜单二
  


• 
  菜单三菜单三
  


• 
  菜单四菜单四
  

/*宽高是背景图片的*/
width: 111px;
height: 50px;

/*设置文字垂直水平居中*/
line-height: 50px;
text-align: center;

font-weight: bold;
font-size: 18px;
list-style-type:none;
}

display: block;

/*我们不使用纯黑色*/
color: #292724;
text-decoration:none;
}

/*设置块模式显示，并制定宽高和a的宽高一样，和绝对位置，这是为了使其和a里面的文字重合显示*/
display: block;
height: 50px;
width: 111px;
text-align: center;
position: absolute;
top: 0;
left: 0;

color:#FFE2BB;
}

/*链接激活状态下的样式*/
.animation_menu li.current a {
/*一般灰色高亮背景*/
background-position: 0 0;
}
/*hover黄色高亮背景*/
.animation_menu li.current a span {
background-position: 0 -51px;
}

// 绑定hover事件
$(".animation_menu li a span").hover(
//mouse on事件
function () {
// 通过动态的改变opacity从0到1，这样span的样式和文字就会慢慢的显示出来，覆盖a的样式
$(this).stop().animate({
opacity: 1
}, "slow");
},
//mouse out事件
function () {
// 当鼠标移走的时候，动态改变为0，这样span又看不见了，看到原来的a的样式了。
$(this).stop().animate({
opacity: 0
}, "slow");
}
);

//绑定click事件，点击当前连接，为li添加current class，同时移除其他li的current class
$(".animation_menu li a").click(function () {
$(".animation_menu li a").each(function (index, item) {
$(item).parent().removeClass("current");
});
$(this).parent().addClass("current");
});