C'è un modo per ottenere il tempo di animazione rimanente?

Question

Supponiamo di avere qualche div, e io uso .animate({opacity:0},400, function(){}); per i suoi figli. È mai possibile quindi ottenere il tempo rimanente per completare un'animazione? ad es. 200 ms rimanenti o 0 se non ci sono animazioni? Grazie.

Answer 1

Per aiutarvi a capire meglio come è possibile utilizzare la funzione step [come inserito da gdoron]
ho creato un esempio utilizzando l'istruzione di funzione per ottenere il tempo rimanente:

(fare clic sul pulsante get state! per interrompere l'animazione e recuperare il tempo rimanente!)

demo with distance
demo with opacity

Distanza esempio 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>'); 
}); 

• Si può vedere come ho usato il fx.prop all'interno del animation step per ottenere la (left) proprietà che è attualmente animato.
  
• si può vedere come: conoscere il tempo di animazione e la distanza (opacità, qualunque cosa ...) si può facilmente recuperare il 'fermato/pausa' stato da qualche semplice matematica ((now*time)/distance) e grazie alla now valore restituito .

Answer 2

Non ho idea del motivo per cui avete bisogno, ma il step posso aiutare a estrarre questo valore:

Fase Funzione

La seconda versione di .animate() fornisce un'opzione di passaggio - una funzione di callback che viene attivata in ogni fase dell'animazione. Questa funzione è utile per abilitare i tipi di animazione personalizzati o per modificare l'animazione mentre si sta verificando. Accetta due argomenti (now e fx) e questo è impostato sull'elemento DOM che viene animato.

ora: il valore numerico della proprietà di essere animato ad ogni passo
fx: un riferimento al prototipo oggetto jQuery.fx, che contiene una serie di proprietà quali elem per l'elemento animata, inizio e terminano rispettivamente per il primo e l'ultimo valore della proprietà animata e prop per la proprietà da animare.

docs

Answer 3

Ascolta, non importa la funzione step di cui tutti continuano a parlare. Una volta avevo bisogno di quello che hai fatto e ho scritto il mio che semplicemente ha invertito il tempo lasciato a dare un'occhiata al tempo di animazione totale (dovrebbe già essere noto a te dato che una volta hai dato questo numero a jQuery) e al del opacità corrente e di destinazione. Quindi basta moltiplicare quel quoziente con il tempo di animazione totale, avere la somma sottratta dal tempo totale. Semplice come quella.

pseudo-codice:

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; 
}