0

以下带有 Jquery 的代码不起作用。该部门没有淡出。请帮助我

<html>
<head>
<style type="text/css"> 
#fade{    background-color:#abc123;    width:200px;  height:30px; padding:3px; }
</style>

<SCRIPT type="text/javascript"  src="http://code.jquery.com/jquery-latest.js"></SCRIPT>
<script type="text/javascript"> 
$("#animate").click(function() {
    $("#fade").animate(
            {"width": "200px"},
            "fast");
});
</script>
 </head>
 <body>
<div id="fade">Animate Text</div>
</body>
</html>
4

3 回答 3

2

任何引用 DOM 的 jQuery 都需要包含在文档就绪处理程序 (DRH) 中。此外，您不是在淡化 DIV，而只是在其尺寸上设置动画。

<script type="text/javascript"> 
$(document).ready(function() {
    $("#animate").click(function() {

或者干脆

<script type="text/javascript">
$(function() {
    $("#animate").click(function() {

...否则，您会在 DOM 实际准备好之前尝试与 DOM 元素对话。

[编辑-正如其他答案所指出的，没有#animate元素。这可能是问题的另一个原因，尽管上述问题仍然存在。]

于 2012-07-06T11:45:06.950 回答
1

您的示例中没有#animate元素！

如果您像这样更改代码，它将正常工作：

$("#fade").click(function() {
    $("#fade").animate(
            {"width": "200px"},
            "fast");
});​

jsFiddle

于 2012-07-06T11:45:05.813 回答
0

您正在使用的 .animate 调用不会使 div 褪色，但会尝试为宽度变化设置动画。要淡化块，请执行以下操作：

$(document).ready(function() {
    $("#fade").click(function() {
        $(this).fadeOut("fast");
    });

    $("#fade").mouseout(function() {
        $(this).fadeIn("fast");
    });
});

编辑：更新了完整的示例，包括鼠标悬停。

于 2012-07-06T11:45:20.273 回答