Some improvements and feedback on Random Quote Machine

Hi,
My codepen for random quote machine is here.

I need some advice over :

  1. My animation is missing some synch. Whenever height goes to zero and quote fade out, there remains a little bit of text and dash visible. How can i remove that ?

  2. My initial plan was to turn width and height to zero and then change them to fix height but auto width so that quote can fit. Any suggestion how can i do that ?

Any other feedback or suggestion is also welcome. :slight_smile:

For the glitching part, it’s just the end of the animation is too quick to be seen. If you encapsulate the getJSON, that’s inside the $("#quoteMachine").on("click") event handling, with a Timeout of 0, you will be able to see there is nothing remaining :slight_smile:

1 Like

Adding a one more line of code can make it fade out with the button press.
$("#quoteMachine").on(“click”, function () {
$(".blockquote-footer").fadeOut(“slow”);

}

Bring it back by using similar code.
$(".blockquote-footer").delay(1000).fadeIn(“slow”);
somewhere near the other fadeIn statements.
Using .delay(1000) will have it appear in the midst of loading the quote.

Looks good, but the animations do seem to cause some unexpected glitches. Sometime I get a non-quote, and the button goes away. Also, you might be able to make your random color generator better. Sometimes it creates some pretty hard to read color combinations.

Don’t forget to link up to Twitter!

Mike

1 Like

Thank you @mnichols08 and @gfruleux . I will work on this. :slight_smile: