Question

我有一个简单的水平菜单。我想要的只是为了我的背景，我正在从白色到灰色的动画。一切都在Firefox和IE中运行良好，但在Chrome中却不行。原因是什么？

代码：

<script type="text/javascript">
$(document).ready(function(){
    $("#nav ul li a").hover(function() {
        $(this).stop().animate({ backgroundColor: '#E5E5E5' }, 500);
    },function(){
          $(this).stop().animate({backgroundColor: '#FFF' }, 500);
     })
})
</script>

和HTML：

<div id="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Estimator</a></li>
        <li><a href="#">Products & Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div><!--end of nav div-->

我知道这是非常简单的东西，我以前做了很多次。但就像我说的那样，它在Chrome中不起作用。

FIXED：

我刚刚更改了插件。正如我所说，自从我用jQuery做了一些事以来已经有一段时间了。完全忘记了jQuery UI。谢谢大家！

Answer 1

我已经尝试过了（here），但在任何浏览器中它都不适合我。

这是预期的结果，因为jQuery不支持开箱即用的彩色动画。你必须使用jQuery UI（这是巨大的）或像this

这样的插件

作为替代方案，您可以使用CSS3过渡 - DEMO

执行此操作

a {
    -webkit-transition: background-color .5s;
       -moz-transition: background-color .5s;
        -ms-transition: background-color .5s;
         -o-transition: background-color .5s;
            transition: background-color .5s;
}  

a:hover {
    background-color: #5f5f5f;
}

jQuery动画改变背景颜色（不在Chrome中工作）

1 个答案: