Can you animate a gradient on hover?

trying to figure out if you can animate a gradient on a UL LI A:hover ??

I have the jQuery color animate plug installed and deployed, but can not figure out how to utilize the example for what I am doing:

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

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