jQuery configurazione animazione callback genera un errore

Question

Voglio realizzare un jQuery animazione callback metodo progresso o passo,

ma in ogni caso sto ottenendo il seguente errore:

NS_ERROR_IN_PROGRESS: Component returned failure code: 0x804b000f (NS_ERROR_IN_PROGRESS) [nsICacheEntry.dataSize] 

ho cercato molto, ma non è in grado di trovare nulla nel contesto, sono un po 'bloccato qui, per favore suggerire cosa potrebbe causare questo errore?

In fiddle ho provato con passo e progresso e il suo funzionamento lì, ma non è riuscito a farlo funzionare nel mio codice, sto solo guardando, qualcuno ha affrontato un tale tipo di errore nell'animazione jQuery?

Il codice di esempio è:

this.taskHandle.find('img').stop(true, true).animate({ 
     //todo// 
     top: vtop, // this.taskHandle.outerHeight(), 
     //'top': 0 - $('.target.upper').height(), 
     width: 0, 
     opacity: 0 
    }, { 
     duration: 2000, 
     step: function(){ 
      console.log('I am called'); 
     } 
    }, 

    $.proxy(function() { 
     // some css clearing method 
    }, { 
     // some further actions after animation completes 
    }) 
); 

Answer 1

Hai alcuni errori semantici succedendo qui. Ho intenzione di ripubblicare il codice, formattato per una più facile lettura:

this.taskHandle.find('img') 
    .stop(true, true) 
    .animate(
     { 
      //todo// 
      top: vtop , // this.taskHandle.outerHeight(), 
      //'top' : 0 - $('.target.upper').height(), 
      width : 0, 
      opacity : 0 
     }, 
     { 
      duration:2000, 
      step: function() { 
       console.log('I am called'); 
      } 
     }, 
     $.proxy(
      function() { 
       // some css clearing method 
      }, 
      { 
       // some further actions after animation completes 
      } 
     ) 
    ); 

Primo: animate() non accetta 3 parametri (almeno non quelle 3 parametri). Non sono sicuro di cosa stai provando a fare con il tuo css clearing method, ma tutto ciò che non dovresti succedere dopo che l'animazione è stata completata dovrebbe essere nel metodo complete che aggiungi proprio accanto al metodo step.

Secondo: $.proxy() deve avere il contesto in cui si desidera che venga eseguito come secondo parametro, non come un'altra funzione "completa".

Quindi ecco un esempio leggermente modificato che funziona. Puoi provarlo da solo nel this fiddle.

var vtop = 100; 

$('div') 
    .stop(true, true) 
    .animate(
     { 
      top: vtop, 
      width: 0, 
      opacity : 0 
     }, 
     { 
      duration: 2000, 
      step: function() { 
       console.log('I am called'); 
      }, 
      complete: function() { 
       alert('complete');// some further actions after animation completes 
      } 
     } 
    ); 

Answer 2

Si potrebbe utilizzare di Julian Shapiro Velocity.js, che le animazioni sono (discutibile) più veloce di jQuery e CSS (read this per più)

Esso consente di utilizzare i callback come ad esempio:

• inizio
• progress
• completo

come:

var vtop = 100; 
jQuery(document).ready(function ($) { 
    $('div').find("img").velocity({ 
     top: vtop, 
     width: 0, 
     opacity: 0 
    }, { 
     duration: 2000, 
     begin: function (elements) { 
      console.log('begin'); 
     }, 
     progress: function (elements, percentComplete, timeRemaining, timeStart) { 
      $("#log").html("<p>Progress: " + (percentComplete * 100) + "% - " + timeRemaining + "ms remaining!</p>"); 
     }, 
     complete: function (elements) { 
      // some further actions after animation completes 
      console.log('completed'); 
      $.proxy(...); // some css clearing method 
     } 
    }); 
}); // ready 

Avviso che basta sostituire .animate() da .velocity()

Vedi JSFIDDLE