Question

我正在尝试根据对象当前是否为动画来更改动画的标题。例如，当马里奥为用户点击动画时，它应该显示为“他正在行走”，一旦他到达目的地，它应该显示为“他静止不动”。根据我对jQuery API文档的理解，完整的属性应该处理这个问题。

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="css/stage.css" />

    <script src="jslibs/jquery-1.10.2.min.js"></script>
    <script>

$(document).ready(function () {
    $("#stage").click(function (event) {
        var offset = $(this).offset();
        var x = event.pageX - offset.left;
        var y = event.pageY - offset.top;

        $("#header").html("<h1>Mario is walking!</h1>");

        $("#player").animate({
            top: y,
            left: x,
            duration: 3,
            complete: function () {
                $("#header").html("<h1>Mario is standing still...</h1>");
            }
        });
    });
});
    </script>
</head>
<body>
    <div id="header">
        <h1>Mario is standing still...</h1>
    </div>
    <div id="stage">
        <img id="player" src="images/mario.gif" alt="Mario" />
    </div>
</body>
</html>

这些更改可以正常运行。当持续时间与选项分组时，无法识别。这可以正确调试。

$( "#player" ).animate({
top: y,
left: x,
duration: 3
},{
complete: function(){ 
$( "#header" ).html( "<h1>Mario is standing still...</h1>" ); 
}
});

Answer 1

你对animate函数的参数是错误的，你需要使用带有properties and options参数的变体。

css定义是duration和complete之类的选项

$(document).ready(function () {
    $("#stage").click(function (event) {
        var offset = $(this).offset();
        var x = event.pageX - offset.left;
        var y = event.pageY - offset.top;

        $("#header").html("<h1>Mario is walking!</h1>");

        $("#player").animate({
            top: y,
            left: x
        }, {
            duration: 3,
            complete: function () {
                $("#header").html("<h1>Mario is standing still...</h1>");
            }
        });
    });
});

演示：Fiddle

Answer 2

您可能只想使用动画的回调函数，如您链接的网站所示。他们的例子：

$( "#clickme" ).click(function() {
   $( "#book" ).animate({
  opacity: 0.25,
  left: "+=50",
  height: "toggle"
 }, 5000, function() {
  // Animation complete.
});
});

如何在完成.animation（）时使jQuery更改html

2 个答案: