2

采取这两种方法：

function moveUp() {
     this.element.rotate(0);
     this.element.animate({"margin-top": "-=51px"}, "slow");
     //do some more things for instance.    
}

 function moveRight() {
     this.element.rotate(90);
     this.element.animate({"margin-left": "+=51px"}, "slow");
 }

以防万一，我旋转一个对象，然后用动画移动它。这些功能映射到按键，所以如果用户按下向上或向右，对象就会移动。我的问题是动画正确排队，因为 jQuery 为它们使用 fx 队列。但是轮换会立即发生，就像我做的任何其他事情一样，因为它们是我的代码中的自定义内容。

结果很明显，如果你按 say up 并立即按 right，对象会向上旋转，但在向上移动时，它会向右旋转，它并没有真正等到它到达那里。

我如何编写这段代码，以便将整个方法链接起来，而不仅仅是它们的动画。我可以添加回调，但它们并不总是一起执行，如果它们碰巧同时被调用，我需要将它们排队，但我不太明白如何在 jQuery 中使用队列功能。

顺便说一句，为了查看更多这背后的代码，我最近也问了这个问题：原型函数数组

4

1 回答 1

1

您可以使用以下内容对其进行动画处理：

    $elem.animate({rotation: 90},
    {
            duration: 'slow',
            step: function(now, fx) {
                    $(this).css({ "transform": "rotate("+now+"deg)", "-webkit-transform": "rotate("+now+"deg)", "-moz-transform": "rotate("+now+"deg)" });
            }
    })

这会自动将其添加到队列中

我在这里做了一个jsfiddle：

http://jsfiddle.net/obartra/7Qwgd/1/

编辑：只是为了解释我的理由，我猜rotate您使用的方法是使用 setTimeout 逐步设置 CSS 中的旋转，因此不会将其添加到动画队列中。此处的代码animate用于旋转元素，以便将其添加到动画队列中。

于 2013-04-04T15:58:58.780 回答