jquery悬停动画不起作用答案

【问题标题】：jquery hover animate is not workingjquery悬停动画不起作用
【发布时间】：2013-08-16 14:02:56
【问题描述】：

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

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

【问题讨论】：

你必须包含 jQuery UI 脚本。
哪些部分有效，哪些无效？您是否进行了测试以确保选择器正常工作并且任一悬停功能正在触发？
@Maslow 他只需要 jQuery UI。他的剧本很好。

标签： jquery hover jquery-animate

【解决方案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

【讨论】：

【解决方案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。

【讨论】：