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

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

结果很明显，如果你按say up然后马上按right，物体向上旋转，但是当它向上运动的时候，它向右旋转，它并没有真正等到它到达那里。

我如何编写这段代码，以便链接整个方法，而不仅仅是它们的动画。我可以添加回调，但它们不会总是一起执行，如果它们碰巧被同时调用，我需要将它们排队，但我不太了解如何使用 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 来旋转元素，以便将其添加到动画队列中。