使用jQuery动画背景颜色

我试图在使用函数单击按钮时动画div元素。但是，它不起作用。可能是什么问题？使用jQuery动画背景颜色

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 _______时它不工作？

函数调用者不在范围内。试试这个小提琴http://jsfiddle.net/edXfg/ –

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

，如果你从的onclick切换到一个JavaScript事件绑定它甚至会更好。

2013-06-27 14:33:12

我把onclick="caller()"拿出来，而不是把$('#bid').click(caller);放入jQuery位。这是做同样的事情，并达到你喜欢的结果。见这里：http://jsfiddle.net/GELTP/1118/

2013-06-27 14:31:37

请看更新。 –

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

您需要定义你的函数使用它的onClick

之前，你拨弄选择No Wrap -in<head>

2013-06-27 14:32:44

你的功能永远不会被调用。在JSFiddle中，html的范围与JavaScript不同，所以调用'caller（）'将不会调用您设置的变量。 Here's a working updated fiddle您可以在JavaScript中附加动作（无论如何，这通常被认为是最佳实践）。

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

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

2013-06-27 14:33:43 Briguy37

的函数调用方不在范围内，因为包装的jsfiddle这里面window.load

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

尝试更改选项No wrap in Head中的jsfiddle >>http://jsfiddle.net/GELTP/1124/ < <

2013-06-27 14:35:13

你的jsfiddle惹的祸，脚本在左侧的设置中设置为“onload”，将其设置为“<head>”中的不包装，并且其工作

2013-06-27 14:37:22

回答