Random quote challenge - CSS opacity change only working once [SOLVED]

I am trying to create an effect where anytime a user clicks the typewriter image to get a new quote, the previous quote will fade out (opacity: 0) and a new quote will fade in (opacity: 1).

However my code only works once, the first time one clicks for a quote. Where did I go wrong?

Same symptom when you have the bouncing/animating image in your previous post… so probably same solution too.

Add the class, remove the class… but give it some timeout delay so you can see the animation.

Try using jQuery’s .animate(). It allows you to set styles for a duration of time, then tell it what to do after the animation’s finished.

It goes like this:

$('#demo').animate({opacity: 0}, 3000, function() {
  // this runs after the 3 second animation finishes

  // then add code to reset the opacity back to 1...

It seems to be working now :wink:

I’m not sure how to remove the “class” in this context, because opacity is not a class. Or is it??

Thank you for this tip!
My final code JS code is like this and it creates the effect I want. Each time the machine is clicked, the opacity is reset to zero.

         opacity: 1
       }, 3000);
1 Like