Подумав об этом немного сложнее, я понял, что то, что вы пытаетесь сделать, нелегко сделать из-за способа обработки анимации в jQuery.
Поскольку анимация управляетсяочередь, невозможно запускать параллельные анимации на одном и том же элементе, если они не находятся в одной и той же функции.
То есть
$(element).animate(aThing, aTime);
.animate(anotherThing, anotherTime);
не будет выполняться параллельно. aThing завершится через aTime , за которым следует anotherThing для anotherTime .
Таким образом, вы можете выполнить только несколькоизменяется, если их использовать в одной и той же функции:
$(element).animate({aThing: aValue, anotherThing: anotherValue}, aTime);
Вот краткое объяснение того, как функции анимации обрабатываются в jQuery.
Объекту таймера назначаетсяэлемент на время анимации:
function t( gotoEnd ) {
return self.step(gotoEnd);
}
t.elem = this.elem;
jQuery.timers.push(t);
Когда вы вызываете функцию остановки, он удаляет таймер из таймеров:
// go in reverse order so anything added to the queue during the loop is ignored
for ( var i = timers.length - 1; i >= 0; i-- ) {
if ( timers[i].elem === this ) {
if (gotoEnd) {
// force the next step to be the last
timers[i](true);
}
timers.splice(i, 1);
}
}
Таким образом, нет никакого способа удалить определенныйсвойство функции анимации, так как сам таймер убит.
Единственный способ, которым я мог бы думать об этом, - отслеживать время и продолжительность запуска, повторно ставить в очередь анимацию и останавливатьтекущий.
var start = $.now();
var duration = 5000;
$(element).animate({opacity: '0.5', width: '500px'}, duration);
...
var remaining = duration - ($.now() - start);
$(element).animate({opacity: '0.5', remaining)
.stop();