hover带有动画效果的导航
html,body{overflow-x:hidden;} ul,li{list-style: none;} .nav{width:100%; height: 26px; overflow: hidden;} .nav li{width: 100px; text-align: center; height: 26px; line-height: 26px; float: left; position: relative;} .nav li a{text-decoration: none; color: #333;} .nav li .bg{background: #168EED; position: absolute; top:0; left:0; width: 100%; height: 100%; z-index:-1; filter:alpha(opacity=0); opacity:0;}
<ul class="nav"> <li><div class="bg"></div><a href="javaScript:;">li 1</a></li> <li><div class="bg"></div><a href="javaScript:;">li 1</a></li> <li><div class="bg"></div><a href="javaScript:;">li 1</a></li> </ul>
$(function () {
var $lis = $(".nav li");
var $lisBg = $(".nav .bg");
$lis.hover(function () {
var $index = $(this).index();
$lisBg.eq($index).animate({"opacity": 1}, 200);
}, function () {
var $index = $(this).index();
$lisBg.eq($index).animate({"opacity": 0}, 300);
})
})