jquery .animate()不工作

Question

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

我想动画一个标题的颜色，当点击，它不工作。

我把我的页面缩小到这个简单的部分，因为剩下的部分不需要动画，而且运行良好。

这是JSFiddle

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);      
    })
}

Answer 1

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

jQuery UI捆绑了jQuery颜色插件，它提供颜色动画以及许多用于处理颜色的实用函数。

考虑使用此选择器只对已单击的元素着色：

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

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

Answer 2

您需要使用Jquery.UI才能获得彩色动画。更新了您的小提琴以演示相同的内容。

代码片段：

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

Answer 3

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