Question

试图弄清楚你是否可以在UL LI上设置渐变动画A：悬停??

我安装并部署了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>

你可以在悬停时为渐变设置动画吗？

1 个答案: