jQuery队列函数

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

为了以防万一，我旋转了一个对象，然后用动画移动它。这些函数映射到按键，因此如果用户按Up或Right，对象就会移动。我的问题是动画是正确排队的，因为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/

EDIT:为了解释我的原理，我猜测您使用的rotate方法是使用setTimeout渐进式地设置CSS中的旋转，因此没有将其添加到动画队列中。这里的代码使用animate来旋转元素，以便将其添加到动画队列中。