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

更新：我知道使用选择器的方式，但问题是当使用function _______时它无法正常工作？

Answer 1

它不起作用，因为您在另一个函数内定义函数，而不是全局作用域。如果您从onload切换到no wrap<head>或no wrap<body>，则可以使用。

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

Answer 2

我将onclick="caller()"取出，而是将$('#bid').click(caller);放入jQuery位。这样做可以达到您想要的效果。请在此处查看：http://jsfiddle.net/GELTP/1118/

Answer 3

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

您需要在onClick

中使用之前定义您的功能

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

Answer 4

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

中

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

尝试将选项更改为jsfiddle＆gt;中的No wrap in Head＆gt; http://jsfiddle.net/GELTP/1124/＆lt;＆lt;

Answer 5

你的功能永远不会被调用。在JSFiddle中，html的范围与JavaScript不同，因此调用'caller（）'不会调用您设置的变量。 Here's a working updated fiddle您可以通过JavaScript附加操作（通常认为这是最佳做法）。

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

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

Answer 6

你的jsfiddle是责备，脚本在左边的设置中设置为“onload”，将其设置为“No wrap in＆lt; head＆gt;”它的工作原理