마우스를 올리면 그라디언트에 애니메이션을 적용 할 수 있습니까?

Question

UL 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'); 
} 

Answer 1

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