Take the 2-minute tour ×

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!

share|improve this question
If you want to change text 'smoothly', you might use two <span>s overlapping and do some work. Or if you just want to change text 'instantly', you can use .text(). PS : You may use <span style=".."> for styling instead of <font ..>. –  JiminP Jun 10 '11 at 11:33
add comment

3 Answers

up vote 20 down vote accepted

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.

share|improve this answer
I would like the text to change, with the effect that the old text fades out, while the new text fades in :) –  Jeff Jun 10 '11 at 11:50
@Jeff: I've updated my answer, have a look at the fiddle. –  Kevin Jun 10 '11 at 12:02
There we go, cheers! :) –  Jeff Jun 10 '11 at 12:05
Great and simple solution. Thank you. –  dotTutorials Dec 27 '12 at 23:14
add comment

Following the suggestion by JiminP....

I made a jsFiddle that will "smoothly" transition between two spans in case anyone is interested in seeing this in action. You have two main options:

  1. one span fades out at the same time as the other span is fading in
  2. one span fades out followed by the other span fading in.

The first time you click the button, number 1 above will occur. The second time you click the button, number 2 will occur. (I did this so you can visually compare the two effects.)

Try it Out: http://jsfiddle.net/jWcLz/594/


Number 1 above (the more difficult effect) is accomplished by positioning the spans directly on top of each other via CSS with absolute positioning. Also, the jQuery animates are not chained together, so that they can execute at the same time.


<div class="onTopOfEachOther">
    <span id='a'>Hello</span>
    <span id='b' style="display: none;">Goodbye</span>

<br />
<br />

<input type="button" id="btnTest" value="Run Test" />


.onTopOfEachOther {
    position: relative;
.onTopOfEachOther span {
    position: absolute;
    top: 0px;
    left: 0px;


$('#btnTest').click(function() {        
    fadeSwitchElements('a', 'b');    

function fadeSwitchElements(id1, id2)
    var element1 = $('#' + id1);
    var element2 = $('#' + id2);

         element2.fadeToggle(500, function() {
share|improve this answer
add comment

If all you're looking to do is change the text you could do exactly as Kevin has said. But if you're trying to run an animation as well as change the text you could accomplish this by first changing the text then running your animation.

For Example:

$("#test").html('The text has now changed!');
$("#test").animate({left: '100px', top: '100px'},500);

Check out this fiddle for full example:


share|improve this answer
add comment

Your Answer


