Change text (html) with .animate

Question

I am trying to animate the html part of a tag ( <font id="test" size="7">This Text!</font> ) using jQuery's Animate function, like so:

$("#test").delay(1500).animate({text:'The text has now changed!'},500); 

However nothing happens, it does not change the text.

How can I do this? Thanks!

Answer 1

The animate(..) function' signature is:

.animate( properties, options ); 

And it says the following about the parameter properties:

properties A map of CSS properties that the animation will move toward.

text is not a CSS property, this is why the function isn't working as you expected.

Do you want to fade the text out? Do you want to move it? I might be able to provide an alternative.

Have a look at the following fiddle.

Answer 2

$("#test").hide(100, function() {     $(this).html("......").show(100); }); 

Updated:

Another easy way:

$("#test").fadeOut(400, function() {     $(this).html("......").fadeIn(400); });