Change text (html) with .animate

jquery html text jquery-animate
Jeff picture Jeff · Jun 10, 2011 · Viewed 108k times · Source

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

Kevin picture Kevin · Jun 10, 2011

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.

Related questions

How to add text to an existing div with jquery

I want to add text to an existing div, when I click the Button with the id #add. But this is not working. Here my code: I hope you can help me.

Read More
Add text to textarea - Jquery

How can I add text from a DIV to a textarea? I have this now: $('.oquote').click(function() { $('#replyBox').slideDown('slow', function() { var quote = $('.container').text(); $('#replyBox').val($('#replyBox').val()+quote); // Animation complete. }); });

Read More
Convert HTML to plain text in contentEditable

I have a contentEditable and I strip the formatting of pasted content on('paste') by catching the event. Then I focus a textarea, paste the content in there, and copy the value. Pretty much the answer from here. The problem …

Read More