l-emi l-emi - 4 months ago 9
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() {
$("#main-quote").fadeOut(300);
$("#main-quote").fadeIn(300);
}
};


Any help would be greatly appreciated, thanks!

Answer

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

FadeOut

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

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

jQuery

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


  $('#main-quote').text(selectedQuote.quote);
  var selectedMovie = selectedQuote.movie;
  console.log(selectedMovie);
  $("#what-movie").html(selectedMovie);
  $("#main-quote").fadeIn(300);
});

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.

JSFiddle

Comments