l-emi l-emi - 1 year ago 35
jQuery Question

FadeIn//FadeOut some quotes

I'm trying to get my quotes in this fiddle to have a fade in/out effect when the plus button is clicked. I've read up on it and looked at similar projects but can't figure it out.

I tried adding this (get ready to laugh at my attempt) but it of course broke the damn thing:

$("#random-quote").click(function() {

Any help would be greatly appreciated, thanks!

Answer Source

If you'd like the text to fade out before changing, you can use the fadeout function which looks like this:


$("#main-quote").fadeOut(300, function() {});

You can wrap your $('#main-quote').text(); changes in this, and then call fadeIn(); at the end:


$("#main-quote").fadeOut(300, function() {
  var selectedBG = selectedQuote.background;
  var selectedMovie = selectedQuote.movie;
  $("body").css("background-image", "url('" + selectedBG + "')");

  var selectedMovie = selectedQuote.movie;

Also, for this to work, you need to remove your $('#random-quote').click(getQuote); line, which was making the background change twice because you're calling the same click function twice.