Question

以下使用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>

Answer 1

任何引用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元素。这可能是问题的另一个原因，尽管上述问题仍然存在。]

Answer 2

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

如果你改变这样的代码，那就可以了：

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

jsFiddle

Answer 3

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

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

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

编辑：更新了完整示例，包括mouseout。

jquery褪色效果不起作用

3 个答案: