Question

$(document).ready(function(){
    $("h1").hover(function(){
        $(this).animate({'color' : 'red'}, "fast");
    },
    function(){
        $(this).animate({'color' : 'white'}, "fast");
    });
});

当我将鼠标悬停在h1标签上时，我希望h1标签中的文字颜色变为红色。当鼠标离开h1标签时，我想要将文本再次变为白色。有人可以修改我的代码吗？

Answer 1

来自documentation ：

注意：jQuery UI项目通过允许某些非数字样式（如颜色）设置动画来扩展.animate()方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

加载jQuery后，在页面中包含jQuery UI：

http://code.jquery.com/ui/1.10.3/jquery-ui.js

您的<head>将如下所示：

<!-- Load jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- Load jQuery UI -->
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

然后动画就可以了。

JSFIDDLE

Answer 2

你不能只使用jQuery为颜色设置动画。

要为颜色设置动画，您需要添加jQuery UI。

使用以下HTML：

<h1>A header</h1>
<h1>Another header</h1>
<h1>And another header</h1>
<h2>A h2</h2>

和您的Javascript：

$(document).ready(function(){
    $("h1").hover(function(){
        $(this).animate({color : 'red'}, "fast");
    },
    function(){
        $(this).animate({color : 'white'}, "fast");
    });
});

这是demo。

jquery悬停animate无效

2 个答案: