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!

If you want to change text 'smoothly', you might use two ``s overlapping and do some work. Or if you just want to change text 'instantly', you can use `.text()`. PS : You may use `` for styling instead of ``. — JiminP, Jun 10 '11 at 11:33

Kevin · Accepted Answer · 2011-06-10T12:02:20.813

86

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.

edited Jun 10 '11 at 12:02

answered Jun 10 '11 at 11:34

Kevin

5,626
3
28
41

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
2

Great and simple solution. Thank you. – Rasmus Søborg Dec 27 '12 at 23:14
How do you make the old text come back when the cursor hovers away? – lostsoul29 Nov 29 '16 at 01:22
why use an external link while it's just few lines of code? – minhle_r7 Jan 14 '19 at 15:47

jalmatari · Answer 2 · 2020-04-03T07:42:08.527

12

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

Updated:

Another easy way:

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

edited Apr 03 '20 at 07:42

answered Oct 07 '17 at 03:11

jalmatari

331
5
8

3

again, down voters everywhere, I used this code in production with slight modification. +1. Down-voters: Please test any code before you down vote. offending! – wpcoder Nov 03 '17 at 23:34
3

@wpcoder I did not vote on this answer, but I assume that it was downvoted because it is just showing some code without any explanation. Some users downvote answers without explanation as low quality answer. – Modus Tollens Nov 03 '17 at 23:38
2

The point is; dose this answer help or not, and it helped me , just changed `.show(1000)` and it worked. – wpcoder Nov 04 '17 at 02:02
3

With a fadeIn-fadeOut instead hide-show seems smoothest, but is a nice solution – Leonardo Sapuy Feb 28 '18 at 21:29

score 4 · Answer 3 · answered Mar 25 '20 at 15:01

See Davion's anwser in this post: https://stackoverflow.com/a/26429849/1804068

HTML:

<div class="parent">
    <span id="mySpan">Something in English</span>
</div>

JQUERY

$('#mySpan').animate({'opacity': 0}, 400, function(){
        $(this).html('Something in Spanish').animate({'opacity': 1}, 400);    
    });

Live example

score 2 · Answer 4 · answered Feb 13 '13 at 23:36

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:

one span fades out at the same time as the other span is fading in
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/

Details:

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.

HTML

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

<br />
<br />

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

CSS

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

JavaScript

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

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

    if(element1.is(':visible'))
    {
        element1.fadeToggle(500);
        element2.fadeToggle(500);
    }
    else
    {
         element2.fadeToggle(500, function() {
            element1.fadeToggle(500);
        });   
    }    
}

score 1 · Answer 5 · answered Nov 15 '13 at 16:14

1

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:

http://jsfiddle.net/Twig/3krLh/1/

answered Nov 15 '13 at 16:14

Twig

146
1
8

1

Actually, you can curry the functions: `$(...).html(...).animate(...);` – Washington Guedes Jun 21 '16 at 18:29

score 1 · Answer 6 · answered May 14 '18 at 08:10

For fadeOut => change text => fadeIn effect We need to animate the wrapper of texts we would like change.

Example below:

HTML

<div class="timeline-yeardata">
  <div class="anime">
    <div class="ilosc-sklepow-sticker">
      <span id="amount">1400</span><br>
      sklepów
    </div>

    <div class="txts-wrap">
      <h3 class="title">Some text</h3>
      <span class="desc">Lorem ipsum description</span>
    </div>

    <div class="year-bg" id="current-year">2018</div>
  </div>
</div>


<div class="ch-timeline-wrap">
  <div class="ch-timeline">
    <div class="line"></div>

    <div class="row no-gutters">
      <div class="col">
        <a href="#2009" data-amount="9" data-y="2009" class="el current">
          <span class="yr">2009</span>
          <span class="dot"></span>

          <span class="title">Lorem  asdf asdf asdf a</span>
          <span class="desc">Ww wae awer awe rawer aser as</span>
        </a>
      </div>
      <div class="col">
        <a href="#2010" data-amount="19" data-y="2010" class="el">
          <span class="yr">2010</span>
          <span class="dot"></span>

          <span class="title">Lorem brernern</span>
          <span class="desc">A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k</span>
        </a>
      </div>
    </div>
  </div>
</div>

JQuery JS

$(document).ready(function(){

  $('.ch-timeline .el').on('click', function(){

    $('.ch-timeline .el').removeClass('current');
    $(this).addClass('current');

    var ilosc = $(this).data('ilosc');
    var y = $(this).data('y');
    var title = $(this).find('.title').html();
    var desc = $(this).find('desc').html();

    $('.timeline-yeardata .anime').fadeOut(400, function(){
      $('#ilosc-sklepow').html(ilosc);
      $('#current-year').html(y);
      $('.timeline-yeardata .title').html(title);
      $('.timeline-yeardata .desc').html(desc);
      $(this).fadeIn(300);
    })

  });

});

Hope this will help someone.

score 0 · Answer 7 · answered Nov 03 '17 at 23:29

0

refer to official jquery example: and play with it.

.animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );

answered Nov 03 '17 at 23:29

wpcoder

1,016
11
17

score 0 · Answer 8 · answered Aug 02 '21 at 07:49

Here I come up with this automatic transition using @Hoàng Vũ Tgtt 's Answer and made this.

Html

<h3 id="textAnimator"></h3>

jQuery

var currentIndex = 0;
var texts = [
  'What is Lorem Ipsum?',
  'Why do we use it?',
  'Where does it come from?',
  'Where can I get some?',
  'The standard Lorem Ipsum passage',
];

$('#textAnimator').html(texts[currentIndex]);

function animateText(){
 $('#textAnimator').animate({'opacity' : 0}, 400, function(){
   var $this = $(this);
     $('#textAnimator').html(texts[currentIndex]).animate({'opacity': 1}, 400);
     if(currentIndex == texts.length - 1){
       currentIndex = 0;
     } else {
       currentIndex += 1;
     }
 });
}

setInterval(function(){
    animateText();
}, 3000);

Change text (html) with .animate

8 Answers8

HTML

JQuery JS

Linked