2013-04-04 2 views
2

Возьмите эти два метода:JQuery Queue Функции

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

ответ

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, чтобы повернуть элемент, чтобы он добавился в очередь анимации.

Смежные вопросы