Ad

JQuery: FadeOut() With Html(), Weird Behaviour

- 1 answer

while making a simple random quote machine (part of a coding course I'm attending), I ran into a problem while trying to fade out an element in my HTML, that should then add some new HTML in it and fade it in. Here's the code:

  $(".quote-text").fadeOut(function() {
     $(this).html("<p>" + quotes[currentQuoteNum] + "</p>").fadeIn();
  });

The quotes[currentQuoteNum] just refers to a list of quote strings I have. For some reason, neither the fadeIn or fadeOut functions do not animate correctly. The delay is there before my HTML is updated with a new quote, but the animation is not displayed. Now, if I remove the p element like so:

$(".quote-text").fadeOut(function() {
    $(this).html(quotes[currentQuoteNum]).fadeIn();
});

Then it works and both the fadeIn and fadeOut animations are played. I need to have the p element in there, because inside them I'm adding another two elements to create quotation marks around my quote using a special styling class. I omitted those for simplicity. I know there are other ways but I want to know why this is happening.

Obviously this has something to do with adding tags to my HTML, but I have not been able to find out what it is. Please explain?

Ad

Answer

Code looks fine to me, should not be an issue. Here is a codepen and it works as it should Fade codepen

$(".quote-text").fadeOut(function() {
     $(this).html("<p>" + "Oh Good"+ "</p>").fadeIn();
  });

why not check the content of your variable.Probably its not well formatted

Ad
source: stackoverflow.com
Ad