jquery .animate() 不起作用答案

【问题标题】：jquery .animate() doesn't workjquery .animate() 不起作用
【发布时间】：2014-07-14 12:11:04
【问题描述】：

我不明白为什么我的代码不起作用...

我想在单击时为标题的颜色设置动画，但它不起作用。

我将页面缩小到这个简单的部分，因为其余部分不需要动画并且工作正常。

HTML

<head>
    <script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="Scripts/Script.js" type="text/javascript"></script>
</head>
<div id="Nav">
    <h2>About</h2>
    <h2>Works</h2>
    <h2>Contacts</h2>
</div>

CSS

#Nav {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    z-index: 2;
}
#Nav h2 {
    display: table;
    color: #353535;
}
#Nav h2:hover {
    cursor: pointer;
}

JQUERY

function sortEvents() {
    $("#Nav h2").click(function () {
        $("h2").animate({ "color": "#f49d29" }, 1500);      
    })
}

【问题讨论】：

单独的 jQuery 无法为颜色设置动画。你需要一个像github.com/jquery/jquery-color这样的插件

标签： jquery animation jquery-animate

【解决方案1】：

在您的小提琴中，您没有包含 jQuery；那么animate使用颜色只能通过包含jQuery UI或jQuery颜色来使用：

jQuery UI 捆绑了提供颜色的 jQuery Color 插件动画以及许多用于处理颜色的实用功能。

考虑使用这个作为选择器只为点击的元素着色：

$("#Nav h2").click(function () {
    $(this).animate({
        "color": "#f49d29"
    }, 1500);
})

演示：http://jsfiddle.net/IrvinDominin/49Zrf/5/

【讨论】：

谢谢！我使用“this”，但对于这个例子我并不担心。完整的动画选择了更多的东西，“h2”只是一个例子。
@enikmaster 好的，这只是一个补充 :-)

【解决方案2】：

标准的 jquery 库不支持彩色动画。需要包含 jQuery UI 才能实现。 http://jqueryui.com/animate/

【讨论】：

谢谢！感谢您的帮助。

【解决方案3】：

您需要使用 Jquery.UI 才能获得彩色动画。已更新您的 Fiddle 以进行演示。

代码片段：

$(document).on('click','#Nav > h2', function () {
    $(this).animate({ "color": "red" }, 1500);      
});

【讨论】：