jQuery animate () cambia el texto

Ahora estoy dando mis primeros pasos en jQuery animate (). Intento hacer un tipo de presentación solo para practicar, pero parece que no puedo cambiar el texto de mi div en el medio de la animación con la función animate ().

Aquí está mi código actual:

     $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); div.animate({fontSize:'1em'},2000); div.animate({opacity:'0'},"slow"); //can I change the text with animation??? div.animate({opacity:'1'},"slow"); div.animate({left:'0px'},"slow"); }); });     
HELLO

¿Existe alguna forma práctica de que pueda cambiar el texto mientras la opacidad está desactivada, por lo que cuando la animación regresa, el texto cambia?

Puede usar la función de cola para poner en cola el cambio.

 $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); div.animate({fontSize:'1em'},2000); div.animate({opacity:'0'},"slow"); div.queue(function() { div.html('New text'); div.dequeue(); // This is necessary to continue the animation }); div.animate({opacity:'1'},"slow"); div.animate({left:'0px'},"slow"); }); }); 

Puede definir un oyente de animación y cambiar su texto dentro del oyente:

 $('div').animate( { opacity: 0 }, // and all the other properties you want to animate { duration: 50, step: function(left){ // change text here after a particular progress } }); 

Esto no está disponible en jQuery, pero puedes usar el plugin jQuery typed.js , aquí hay un ejemplo :

  div.typed({ strings: ["HELLO", "It's me..."], typeSpeed: 0 });