Есть ли способ получить оставшееся время анимации?

Question

Предположим, у меня есть div, и я использую .animate({opacity:0},400, function(){}); для своих детей. Возможно ли получить оставшееся время для анимации? например, 200 мс, или 0, если нет анимации? Спасибо.

Answer 1

Чтобы помочь вам лучше понять, как вы можете использовать step функцию [а отправленный gdoron]
Я создал пример использования шаг функцию, чтобы получить оставшееся время:

(нажмите кнопку get state!, чтобы остановить анимацию и получить оставшееся время!)

demo with distance
demo with opacity

Distance пример JQuery:

var time = 4000; 
var distance = 300; 
var currentTime = 0; 

$('#ball').animate({ 
    left: distance 
}, { 
    duration: time, 
    step: function (now, fx) { 

     currentTime = Math.round((now * time)/distance); 
     var data = fx.prop + ' ' + Math.round(now) + '; <b>' + currentTime + 'ms</b> '; 

     $('body').append('<p>' + data + '</p>'); 
    }, 
    easing: 'linear' 
}); 

$('#getTime').click(function() { 
    $('#ball').stop(); 
    $('body').prepend('<p>currentTime is:' + currentTime + ' ms; REMAINING: ' + (time - currentTime) + 'ms</p>'); 
}); 

• Вы можете увидеть, как я использовал fx.prop внутри animation step, чтобы получить свойство (left), который в настоящее время анимированный.
  
• Вы можете увидеть, как: зная время анимации и расстояние (непрозрачность, независимо от ...) можно легко извлечь «остановлен/пауза» состояние некоторой простой математике ((now*time)/distance) и благодаря возвращенной now стоимости ,

Answer 2

Я понятия не имею, почему вам это нужно, но step может помочь вам извлечь это значение:

Шаг Функция

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

Теперь: числовое значение свойства анимируемый на каждый шаге
FX: ссылка на объект-прототипа jQuery.fx, который содержит ряд свойств, такие как эль для анимированного элемента, начала и заканчивается для первого и последнего значения анимированного свойства, соответственно, и prop для анимированного свойства.

docs

Answer 3

Слушайте, не обращая внимания на функцию step, о которой все говорят. Я когда-то нуждался в том, что вы делали, и написал свой собственный, что просто положил его назад, спрогнозировав время, оставшееся после просмотра общего времени анимации (должно быть известно вам, поскольку вы когда-то дали этот номер jQuery) и quotient текущая и целевая непрозрачность. Затем просто умножьте это частное с общим временем анимации, получив сумму, вычитаемую из общего времени. Просто как тот.

Псевдо-код:

func calculate-time-left-in-a-running-fade-in-animation: 
{ 
    var current_opacity = $elem.css('opacity'); 
    var target_opacity = this.getTargetOpacity(); 

    var total = this.getTotalAnimationTime(); 

    var quotient = current_opacity/target_opacity; 
    return total - quotient * total; 
}