Question

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

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

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

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库不支持颜色动画。需要包含jQuery UI才能实现它。 http://jqueryui.com/animate/

Answer 2

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

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

考虑使用此选项作为选择器仅对所单击的元素着色：

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

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

Answer 3

您需要使用Jquery.UI才能获得颜色动画。已更新您的Fiddle以演示相同内容。

代码段：

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

jquery .animate（）不起作用

3 个答案: