CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimate.css
Colin Bruin
Colin Bruin

Reputation: 93

CSS animation not working after replacing text?

For my website, I am trying to fade out part of a word, replace it, and then fade it back in. I am using animate.css to do this along with jquery.

HTML

      <h1>D<span id="span-header">iscover</span></h1>

JavaScript

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
}, 700);
$("#span-header").addClass("animated fadeIn");

What it is doing is fading out and replacing the text but it does not fade back in. What am I doing wrong?

Upvotes: 0

Views: 52

Answers (1)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

1st: you need to Move the code for .addClass("fadeIn") inside setTimeout call back function

2nd: use .removeClass('fadeOut') to remove fadeOut class before adding fadeIn class

Demo

$("#span-header").addClass("animated fadeOut");
setTimeout(function() {
   var newText = $("#span-header").text().replace("iscover", "ispicio");
   $("#span-header").text(newText);
   $("#span-header").removeClass('fadeOut').addClass("fadeIn");
}, 700);

Upvotes: 1

Related Questions