基于jQuery的仿FLASH 菜单

主要是备忘一下animate的参数设置方法

核心代码如下：

$(function(){
      
      $("#flash2 li a").hover(
        function(){ 
            $(this).animate(
                { paddingLeft:"40px" },
                {duration: 400, 
                 easing: "easeOutQuint",
                 complete:function(){$(this).addClass("yel")} 
                 }
                ) },
        function(){ 
            $(this).animate(
                { paddingLeft:"10px"  },
                {duration: 400, 
                easing: "easeOutQuint",
                complete:function(){$(this).removeClass("yel")}
                }
                ) }
        )
                   
    })

样式表：

a{ font-weight:900; padding:4px 6px;}
a:hover{ color:#fff;}
script{ display:block;}
.flash{ width:400px; padding:10px; list-style:none; clear:both;}
.flash li{ font-family:Arial, Helvetica, sans-serif; font-size:14px;  border-bottom:1px solid #ddd; clear:both; margin:0;}
.flash li a{padding-left:10px; background:#f0f0f0; display:block; padding-right:10px;line-height:26px; height:26px;}
.flash li a:hover{ color:#fff; background:#f0c;}
.flash li a.yel{ color:#ff0;}

结构 就是一个 ul 列表

<ul id="flash2" class="flash">
    <li><a href="#nogo">F.A.Q</a></li>
    <li><a href="#nogo">Countact Us</a></li>
    <li><a href="#nogo">About Us</a></li>
    <li><a href="#nogo">Countact Us</a></li>
    <li><a href="#nogo">Our Severse</a></li>
    
</ul>

另： 将 script 包含在 pre标签中 并设置 script display:block 在 firefox等浏览器中既可以方便的显示代码 但是IE 不支持 如下：

 

<pre>
<script type="text/javascript">
    $(function(){
      
      $("#flash li a").hover(
        function(){ $(this).animate({ paddingLeft:"40px" },400) },
        function(){ $(this).animate({ paddingLeft:"10px"  }, 400) }
        )
                   
    })
</script>
</pre>

 DEMO:点此浏览