Как выполнить две анимации одновременно на одном объекте с разными таймерами?

Question

Я испытываю удачу в некоторой базовой анимации после базового урока здесь .

В этом уроке объект перемещается в одну сторону, а затем возвращается. Довольно просто.

Однако я хотел бы, чтобы эта базовая анимация продолжалась при одновременном применении другой анимации.

Например, когда мяч движется слева направо, скажем, при переходе 500 мс, происходит еще одна анимация, которая происходит каждые 3000 мс, возможно, она немного поднимается и опускается. Я делаю это, чтобы создать неправильный узор.

Я пытался сделать что-то вроде этого:

(это использует jquery и плагин таймеров)

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
});

А также:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({top:"60px"}, 6000 ).animate ({top:"57px" }, 6000 );
});

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1") .animate ({left:"5px" }, 9000 ).animate ({left:"0px" }, 9000 );
}); 

В обоих случаях кажется, что первая анимация заканчивается, затем начинается следующая ... затем она зацикливается, а не одновременно.

Что мне не хватает или что мне нужно исследовать, чтобы сделать это?

Спасибо за ваше время!

Answer 1

Вы пробовали установить для queue значение false?См. этот ответ в связанном вопросе.

Чтобы это сработало, вам также может понадобиться поместить вторую анимацию в обратном вызове первого (для каждого измерения), поскольку они выиграли 'больше не стоит в очереди:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1").animate ({top:"60px"}, {duration:6000, queue:false, complete:function() {
        $("#ball1").animate ({top:"57px" }, {duration:6000, queue:false} );
    }} )
    $("#ball1").animate ({left:"5px" }, {duration:9000, queue:false, complete:function() {
        $("#ball1").animate ({left:"0px" }, {duration:9000, queue:false} );
    }} )
});

Живой пример на jsFiddle

Обновление: Если вы используете jQuery 1.7, вы можете использоватьстрока в качестве значения queue, что исключает необходимость обратного вызова:

$( "#ball1") .everyTime ( 10, function (){
    $("#ball1")
        .animate ({top:"60px"}, {duration:6000, queue:"top"} )
        .animate ({top:"57px" }, {duration:6000, queue:"top"} )
        .animate ({left:"5px" }, {duration:9000, queue:"left"} )
        .animate ({left:"0px" }, {duration:9000, queue:"left"} );
});

( Edit : я не смог заставить этот пример работать; возможно, я смогу 'использовать произвольные значения в очереди?)

Answer 2

Думаю, вам будет полезен параметр 'step':

http://api.jquery.com/animate/

"step: функция, вызываемая после каждого шага анимации."

Извлечение:

Шаг Функция

Во второй версии .animate () предусмотрена опция шага - функция обратного вызова, которая запускается на каждом шаге анимации.Эта функция полезна для включения пользовательских типов анимации или изменения анимации по мере ее появления.Он принимает два аргумента (now и fx), и это устанавливается для анимируемого элемента DOM.

now: the numeric value of the property being animated at each step


fx: a reference to the jQuery.fx prototype object, which contains a number of properties such as elem for the animated element, start and end for the first and last value of the animated property, respectively, and prop for the property being animated.

Обратите внимание, что функция шага вызывается для каждого анимированного свойства каждого анимированного элемента.Например, для двух элементов списка функция шага срабатывает четыре раза на каждом шаге анимации:

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
    $('body').append('<div>' + data + '</div>');
  }
});