JQuery Animate() Change Text

I'm just now giving my first steps on jQuery animate(). I'm trying to make a presentation type thing just to practice, but I can't seem to be able to change the text of my div in t

Solution 1:

You can use the queue function to queue up the change.

$(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");
    });
 });

Solution 2:

You can define an animation-listener and change your text within the listener:

$('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
      }
});

Solution 3:

This is not available in jQuery, but you can use the jQuery plugin typed.js, here is an example:

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