动态油漆效果滑动的jquery导航菜单

动态油漆效果滑动的jquery导航菜单，完美兼容IE6，但是由于png问题，会显示略有不同。如果想完美解决PNG在IE6下面的透明度问题，可以访问：IE6 PNG透明解决方法 1、在头部引入下面的代码：

<style type="text/css">
    *{margin:0;padding:0;list-style-type:none;}
    a,img{border:0;}
    body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
    /* nav */
    #nav{width:880px;height:570px;margin:0 auto;padding:15px;}
    #nav ul li{float:left;margin-left:15px;display:inline;}
    #nav ul li a{text-align:center;display:block;width:92px;height:40px;line-height:40px;position:relative;font-size:14px;color:#fff;text-decoration:none;}
    li.home a{background:url(images/q.png) 0 0 no-repeat;}
    li.work a{background:url(images/q.png) -95px 0 no-repeat;}
    li.art a{background:url(images/q.png) -190px 0 no-repeat;}
    li.about a{background:url(images/q.png) -285px 0 no-repeat;}
    li.connect a{background:url(images/q.png) -380px 0 no-repeat;}
</style>
<script type='text/javascript' src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script type="text/javascript">
$(function(){
    $('#nav ul li a').hover(function(){
        $(this).stop().animate({height:"208px"},600);
    },function(){
        $(this).stop().animate({height:"40px"},600);
    });
    //Work
    $('#nav ul li.work a').hover(function(){
        $(this).stop().animate({height:"163px"},600);
    },600);
    //Art
    $('#nav ul li.art a').hover(function(){
        $(this).stop().animate({height:"189px"},600);
    },600);
    //About
    $('#nav ul li.about a').hover(function(){
        $(this).stop().animate({height:"126px"},600);
    },600);
    //Connect
    $('#nav ul li.connect a').hover(function(){
        $(this).stop().animate({height:"139px"},600);
    },600);
});
</script>

2、复制下面的代码到您的html页面

<div id="nav">
    <ul>
        <li class="home"><a href="http://www.5imoban.net/" alt="模板网" title="模板网" target="_blank">Home</a></li>
        <li class="work"><a href="#">Work</a></li>
        <li class="art"><a href="#">Art</a></li>
        <li class="about"><a href="#">About</a></li>
        <li class="connect"><a href="#">Connect</a></li>
    </ul>
</div>