为什么jQuery动画不起作用?

时间:2015-03-05 12:39:45

标签: jquery

这是我的代码:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Jquery </title>
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <style>
            #change_me {
                position: absolute;
                top: 100px;
                left: 400px;
                font: 24px arial;
            }
            #move_up #move_down #color #disappear {
                padding: 5px;
            }
        </style>
    </head>
    <body>
        <button id="color">Color me</button>
        <button id="move_down">Move Down</button>
        <button id="move_up">Move Up</button>
        <button id="hide">Hide me</button>
        <div id="change_me">Make me do stuff</div>
        <script>
            $(document).ready(function() {
                $("#color").click(function() {
                    $("#change_me").css("color", "green");
                });
                $("#move_down").click(function() {
                    $(#change_me").animate({top:500},2000);
                });
                $("#move_up").click(function() {
                    $(#change_me").animate({top:30},200);
                });
                $("#hide").click(function() {
                    $("#change_me").toggle("slow");
                });
            });
        </script>
    </body>
</html>

当我运行此代码时,没有一个按钮不起作用。

我自己写了每一行,我可能知道,我的错误是什么?

3 个答案:

答案 0 :(得分:0)

您错过了添加"语法错误Working Demo here,请检查以下代码。

工作代码:

$(document).ready(function() {
    $("#color").click(function() {
        $("#change_me").css("color", "green");
    });
    $("#move_down").click(function() {
        $("#change_me").animate({ top: 500 }, 2000);
    });
    $("#move_up").click(function() {
        $("#change_me").animate({ top: 30 }, 200);
    });
    $("#hide").click(function() {
        $("#change_me").toggle("slow");
    });
});

答案 1 :(得分:0)

$(#change_me")的选择器为false。你忘了给那些选择器加双引号。这是您的固定代码:

$(document).ready(function() {
  $("#color").click(function() {
    $("#change_me").css("color", "green");
  });
  $("#move_down").click(function() {
    $("#change_me").animate({top:500},2000); // Here you forgot to put "
  });
  $("#move_up").click(function() {
    $("#change_me").animate({top:30},200); // Here you forgot to put "
  });
  $("#hide").click(function() {
    $("#change_me").toggle("slow");
  });
});

答案 2 :(得分:0)

此行缺少开头&#34;马克:

$(#change_me").animate({top:30},200);

应该是:

$("#change_me").animate({top:30},200);

如果仍然无效,您可以提供更多详细信息,例如浏览器版本