Question

采用以下两种方法：

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队列。但旋转发生在我身上，以及我做的任何其他事情，因为它们是我在代码中的自定义内容。

结果很明显，如果按下说出并立即向右按，物体会向上旋转，但当它向上移动时，它向右旋转，它不会等到它到达那里。

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

顺便说一下，为了看到更多这背后的代码，我最近也问了这个问题：Array of prototype functions

Answer 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来旋转元素，以便将其添加到动画队列中。

jQuery队列函数

1 个答案: