How to fade text in and out on click?

Tell us what’s happening:
Hello everybody, I’m working on the random quote generator. It is set up to where you click a button and the quote should fade out and then fade in with new quote. However, the AJAX call is replacing the quote right away, then it fades out and in again. I’m trying to make it 1) text fade out, 2) div is emptied, 3) div is replaced with new quote and 4) div is faded back in. However, the way my code is now, it’s 1) div is replaced with new quote, 2) fade out, 3)emptied and 4) fades in. Here is the codepen. Any help would be greatly appreciated!

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

thoughts?

  function populateQuote(quote) {
    $("#quoteOutput").animate({opacity:0},0);
    $("#quoteOutput").animate({opacity:1},500);
    $("#quoteOutput").empty();
    $("#quoteOutput").prepend(quote.content + "<p>— " + quote.title + "</p>");
  }

Thank you d3eiholo! This is definitely workable, but what if I wanted to have the text fade out as well? If I change $("#quoteOutput").animate({opacity:0},500); then I’ll have the same problem as before where the quote changes first then the fade out/in. I do appreciate the advice you offered nonetheless.

i’m looking at delaying when populateQuote runs so the window has time to make that section opaque before the quote loads in.
i’ll reply with something in a bit.

1 Like

Thank you! I’ve tried:

    $("#quoteOutput").animate({opacity:0},200);
    $("#quoteOutput").delay(2000).animate({opacity:1},500);
    $("#quoteOutput").empty();
    $("#quoteOutput").prepend(quote.content + "<p>— " + quote.title + "</p>");

and

    $("#quoteOutput").animate({opacity:0},200);
    $("#quoteOutput").animate({opacity:1},500);
    $("#quoteOutput").empty();
    $("#quoteOutput").delay(2000).prepend(quote.content + "<p>— " + quote.title + "</p>");

I wonder if it’s an ajax thing?

EXACTLY what I was looking for! I’ve never heard of setInterval() and clearInterval(), but now I will be adding this to my arsenal. I appreciate the help so much! :star_struck:

Really fast question, is saying let x an ES6 way of saying let x = ''?

let x; is letting me use that variable name globally so i can reference it in multiple places (the ajax and the populateQuote function).

let x = ''; is creating a variable that is an empty string. i haven’t tried, but that might throw an error if you were to make x anything that isn’t a string (like an array or object).

btw if i spam the button, the quotes stutter, so i’m looking into that.

Got it. Also, totally didn’t notice it would stutter if you click on it multiple times. This works for me for now but if you think of something then definitely feel free to share it. I’ll be working on this as well on my own time so if I think of another solution I’ll let you know :wink:

ok my guy, setTimeout , solves that stuttering effect if the button is spammed.
all that’s doing is delaying populateQuote() from running for 500 milliseconds.
while it’s being delayed you’re making #quoteOutput invisible in 500 milliseconds.
populateQuote() fires off.
#quoteOutput becomes opaque in 500 milliseconds.

$(document).ready(function () {
  $('h1').delay(400).animate({'opacity':'1'},800);
  $('button').delay(700).animate({'opacity':'1'},800);
  
  $("#getQuote").on("click", function() {
    $.ajax( {
      url: ' https://cors-everywhere.herokuapp.com/https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=',
      error: function() {
        $('#quoteOutput').html('<p>An error has occurred</p>');
      },
      type: 'GET',
      cache: false,
      format:'json',
      dataType:'json',
      success:function(response) {
        $("#quoteOutput").animate({opacity:0}, 500);
        setTimeout(function() {populateQuote(response[0])}, 500);
      }
    });
  });

  function populateQuote(quote) {
    $("#quoteOutput").empty();
    $("#quoteOutput").prepend(quote.content + "<p>— " + quote.title + "</p>");
    $("#quoteOutput").animate({opacity:1}, 500);
  }
});

Well that how ajax works. You ask server for some info, then you wait until server replies which varies how much server is busy. Then you wait until interval goes out, then you wait for your animation … But when you click for another request you have to wait for animation and interval to get finished, but you already sent request for server … This is how your app get schizzo after speedy click … Why you just don’t use local quotes and names? Anyroad, to get around your problem is to disable button until it finished with displaying it’s content and animation and interval. This is achieved by disabling button when clicked and then re-enabling it when you finish your ajax call. Put this just after onclick event $(this).prop(‘disabled’, true); and this $("#getQuote").prop(‘disabled’, false); after that interval when on success in ajax call.