jquery中的动画不触发答案

【问题标题】：animate in jquery not firingjquery中的动画不触发
【发布时间】：2010-12-10 13:09:08
【问题描述】：

我的意图是在单击隐藏按钮后立即隐藏 div 元素。但是当我点击隐藏按钮时浏览器保持沉默。

这是我的代码

$.fn.slideFadeToggle = 函数（缓动，回调）{ return this.animate({ opacity: 'toggle', height: 'toggle' }, "slow", easing, callback); }; $("#hid").click(函数(){ 警报（“这里”）； $("#result").slideFadeToggle(); });

hid 是单击时应该隐藏 div 的按钮的 ID。点击功能内的警报也不起作用。

result 是要隐藏的 div 的 id。有什么想法吗？

【问题讨论】：

工作正常吗？ jsfiddle.net/4yUqL/19
这里不工作。我已经包含了 jquery 库。我不知道这段代码有什么错误

标签： jquery

【解决方案1】：

点击功能内的警报也不起作用。

这表明在您执行 $("#hid").click(... 时，ID 为 hid 的元素在 DOM 中尚不存在。在创建 DOM 元素之前，您无法访问它们。

在您尝试访问它们之前确保它们已创建的三种方法是使用 jQuery ready 函数，以简单地确保您的脚本代码在相关元素之后加载，或者使用 jQuery 的 live 功能。

例如，这将失败：

<html>
...
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $("#hid").click(...);
</script>
</head>
<body>
<div id='hid'>...</div>
...

但这会起作用（通过ready 的快捷方式）：

<html>
...
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    jQuery(function($) {
        $("#hid").click(...);
    });
</script>
</head>
<body>
<div id='hid'>...</div>
...

这样（因为脚本位于标记中的元素之后）：

<html>
...
<script type='text/javascript' src='jquery.js'></script>
</head>
<body>
<div id='hid'>...</div>
<script type='text/javascript'>
    $("#hid").click(...);
</script>
...

...后者是 Closure recommend 背后的 Google 团队的方式；同样，YUI team recommend 将您的脚本放在关闭 body 标记之前，这是同样的事情。

这将起作用（通过live）：

<html>
...
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
    $("#hid").live('click', ...);
</script>
</head>
<body>
<div id='hid'>...</div>
...

【讨论】：

但页面已完全加载，然后只有我们单击按钮对吗？到那个时候dom树应该已经加载了？？如果我错了，请纠正我。我不是很专业
@CHID：您单击按钮时并不重要。当您设置点击处理程序时，该元素必须存在；否则，$("#hid") 返回一个空的 jQuery 对象，并且没有任何东西可以连接处理程序。
非常感谢您。更改工作正常。发现问题并解决了
@CHID：太好了，很高兴有帮助。

【解决方案2】：

嗯，它在 chrome 中对我有用：jsfiddle

您是否在该代码之前导入 jquery ？

【讨论】：