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

1

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?

2

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.

3

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
  genQuote();

  // then add code to reset the opacity back to 1...
});
4

It seems to be working now :wink:

5

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

6

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.

$(document).ready(function(){
       $("#machine").click(function(){
         $("#demo").css("opacity","0");
         genQuote();
         $("#demo").animate({
         opacity: 1
       }, 3000);
           
         });
                        
  });
1 Like