Change text html with animate

Question

I am trying to animate the html part of a tag    lt font id  test  size  7  gt This Text  lt  font gt    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

User · Answer

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   lt div class  onTopOfEachOther  gt       lt span id  a  gt Hello lt  span gt       lt span id  b  style  display  none   gt Goodbye lt  span gt   lt  div gt    lt br   gt   lt br   gt    lt input type  button  id  btnTest  value  Run Test    gt    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

User · Answer

For fadeOut    change text    fadeIn effect We need to animate the wrapper of texts we would like change   Example below   HTML   lt div class  timeline-yeardata  gt     lt div class  anime  gt       lt div class  ilosc-sklepow-sticker  gt         lt span id  amount  gt 1400 lt  span gt  lt br gt        sklep  w      lt  div gt        lt div class  txts-wrap  gt         lt h3 class  title  gt Some text lt  h3 gt         lt span class  desc  gt Lorem ipsum description lt  span gt       lt  div gt        lt div class  year-bg  id  current-year  gt 2018 lt  div gt     lt  div gt   lt  div gt     lt div class  ch-timeline-wrap  gt     lt div class  ch-timeline  gt       lt div class  line  gt  lt  div gt        lt div class  row no-gutters  gt         lt div class  col  gt           lt a href   2009  data-amount  9  data-y  2009  class  el current  gt             lt span class  yr  gt 2009 lt  span gt             lt span class  dot  gt  lt  span gt              lt span class  title  gt Lorem  asdf asdf asdf a lt  span gt             lt span class  desc  gt Ww wae awer awe rawer aser as lt  span gt           lt  a gt         lt  div gt         lt div class  col  gt           lt a href   2010  data-amount  19  data-y  2010  class  el  gt             lt span class  yr  gt 2010 lt  span gt             lt span class  dot  gt  lt  span gt              lt span class  title  gt Lorem brernern lt  span gt             lt span class  desc  gt A sd asdkj aksjdkajskd jaksjd kajskd jaksjd akjsdk jaskjd akjsdkajskdj akjsd k lt  span gt           lt  a gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    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

User · Answer

See Davion s anwser in this post   https   stackoverflow com a 26429849 1804068  HTML    lt div class  parent  gt       lt span id  mySpan  gt Something in English lt  span gt   lt  div gt    JQUERY      mySpan   animate   opacity   0   400  function              this  html  Something in Spanish   animate   opacity   1   400                 Live example

User · Answer

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

User · Answer

test   hide 100  function           this  html           show 100            Updated    Another easy way       test   fadeOut 400  function           this  html           fadeIn 400

User · Answer

refer to official jquery example  and play with it    animate       width   70        opacity  0 4      marginLeft   0 6in       fontSize   3em       borderWidth   10px       1500

User · Answer

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

[jquery] Change text (html) with .animate

Examples related to jquery

Examples related to html

Examples related to text

Examples related to jquery-animate