jquery - 使用 jQuery 动画背景颜色

Question

div当使用函数单击按钮时，我正在尝试为元素设置动画。但是，它不起作用。可能是什么问题？

JS：

function caller() {
    $("#hfont1").animate({
        "background-color": "#efbe5c"
    }, 1000);
}

HTML：

<div id="hfont1">Test Stuff</div>
<button id="bid" onclick="caller()">Hit me!</button>

CSS：

#hfont1 {
    color:#e8a010, font-size:48pt;
}

示例链接在这里：http: //jsfiddle.net/GELTP/1117/

更新：我知道使用选择器的方式，但问题是为什么它在使用时不起作用function _______？

score 2 · Accepted Answer

它不起作用，因为您在另一个函数内部定义函数，而不是全局范围。如果您从onloadto切换no wrap<head>或no wrap<body>它有效。

如果您从 onclick 切换到 javascript 事件绑定会更好。

score 1 · Accepted Answer

我onclick="caller()"取出并放入$('#bid').click(caller);jQuery 位。这做同样的事情并达到你喜欢的结果。在这里看到它：http: //jsfiddle.net/GELTP/1118/

score 1 · Accepted Answer

您收到此错误--> Uncaught ReferenceError: caller is not defined

您需要在 onClick 中使用之前定义您的函数

No Wrap -in<head>在你的小提琴上选择

score 1 · Accepted Answer

函数调用者不在范围内，因为 jsfiddle 将其包装在里面window.load

//<![CDATA[
$(window).load(function(){
  function caller() {
    $("#hfont1").animate({"background-color":"#efbe5c"}, 1000);
   }
});//]]>

尝试将选项更改为No wrap in Headjsfiddle >> http://jsfiddle.net/GELTP/1124/ <<

score 0 · Accepted Answer

你的函数永远不会被调用。在 JSFiddle 中，html 的作用域与 JavaScript 不同，所以调用 'caller()' 不会调用你设置的变量。这是一个工作更新的小提琴，您可以在其中附加来自 JavaScript 的操作（这通常被认为是最佳实践）。

function caller() {
    $("#hfont1").animate({"background-color":"#efbe5c"}, 1000);
}

$('#bid').click(caller);

score 0 · Accepted Answer

你的jsfiddle是罪魁祸首，脚本在左侧的设置中设置为“onload”，将其设置为“No wrap in <head>”并且它可以工作

6 回答 6