0

我正在尝试根据对象当前是否正在设置动画来更改动画的标题。例如，当 mario 为用户点击制作动画时，它应该显示“他正在行走”，一旦他到达目的地，它应该显示“他正在站立”。根据我从 jQuery API 文档中了解到的情况，完整的属性应该解决这个问题。

jQuery .animate() 文档

   <!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>" ); 
}
});
4

2 回答 2

1

您对 animate 函数的参数是错误的，您需要使用带有属性和选项参数的变体。

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>");
            }
        });
    });
});

演示：小提琴

于 2013-10-01T18:14:19.053 回答
1

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

$( "#clickme" ).click(function() {
   $( "#book" ).animate({
  opacity: 0.25,
  left: "+=50",
  height: "toggle"
 }, 5000, function() {
  // Animation complete.
});
});
于 2013-10-01T18:14:34.830 回答