jquery - 你能在悬停时制作渐变动画吗？

Question

尝试弄清楚是否可以在 UL LI A:hover 上制作渐变动画 ??

我安装并部署了 jQuery color animate 插件，但无法弄清楚如何将示例用于我正在做的事情:

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>