你可以在懸停上製作一個漸變動畫嗎？

試圖找出是否可以在UL上創建動畫漸變LI LI A：hover？你可以在懸停上製作一個漸變動畫嗎？

我已經安裝和部署了jQuery顏色動畫插件，但無法弄清楚如何利用爲我所做的例子：

JS：

<script language="javascript" type="text/javascript"> 
    $(document).ready(function(){ 
      var iAniSpeed = 2000; 
     var sBgColor = 'gold'; 
     $('#headerWrap').hover(function(){ 
      $('li a:hover').animate({ backgroundColor: sBgColor }, iAniSpeed); 
      return false;  
     }); 
    }); 
</script>

HTML：

<header> 
      <div id="headerWrap"> 
      <ul> 
       <li><a href="#">ACADEMY INFO</a></li> 
       <li><a href="#">TRANING VIDEOS</a></li> 
       <li><a href="#">ABOUT ALLIANCE</a></li> 
       <li><a href="#">BJJ BLOG</a></li>   
       <li><a href="#">CONTACT US</a></li>   
      </ul> 
     </div> 
    </header>

css：

#headerWrap{ 
    width:960px; 
    margin:0 auto; 
} 

#headerWrap ul{ 
    background:url(../images/separator.png) 0 0 no-repeat; 
    height:50px; 
    margin:0; 
    padding:0; 
    list-style-type:none; 
} 

#headerWrap ul li { 
    height:50px; 
    float:left; 
    background:url(../images/separator.png) top right no-repeat; 
} 

#headerWrap ul li a{ 
    color:#fff; 
    text-decoration:none; 
    padding:15px 20px 0 20px; 
    display:block; 
    height:35px; 
    font-weight:bold; 

} 

#headerWrap ul li a:hover{ 
    color:#022742; 
    text-decoration: none; 
    font-family: Arial, sans-serif; 
    font-weight: bold; 
    cursor: pointer; 
    outline:none; 
    text-shadow: 0 1px 1px rgba(0,0,0,.3); 
    background: #caca5a bottom center no-repeat; 
    background: url(../img/pagination.png) bottom center no-repeat, -webkit-gradient(linear, left top, left bottom, from(#caca5a), to(#909501)); 
    background: url(../img/pagination.png) bottom center no-repeat, -moz-linear-gradient(top, #caca5a, #909501); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#caca5a', endColorstr='#909501'); 
}

來源

2011-09-02 tony noriega

相關：http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor –

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var iAniSpeed = 2000, 
      sBgColor = 'gold'; 
     $('#headerWrap li a').hover(function(){ 
      $(this).animate({ backgroundColor: sBgColor }, iAniSpeed); 
     }); 
    }); 
</script>

來源

2011-09-02 16:27:32 Shef

你可以在懸停上製作一個漸變動畫嗎？

回答

相關問題