Help with jQuery animate

1

So I’m working on the first challenge for the front end libraries projects and for some reason all of my jQuery is working except for the 2 pieces that change the background colors when I get a new quote. Can anyone give me insight as to why?

function getQuotes() {
  return $.ajax({
    headers: {
      Accept: "application/json"
    },
    url: 'https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json',
    success: function(jsonQuotes) {
      if (typeof jsonQuotes === 'string') {
        quotesData = JSON.parse(jsonQuotes);
        console.log('quotesData');
        console.log(quotesData);
      }
    }
  });
}

const colors = ['#39E344', '#4F3EDE', '#D17D45', '#E8D141', '#EB4114', '#253A85', '#856F32', '#04851E', '#8A1223', '#046085', '#8A5112', '#DEFF94', '#850307', '#94FFB0'];

const getQuote = () => {
  return quotesData.quotes[Math.floor(Math.random() * quotesData.quotes.length)];
}

const newQuote = () => {
  let datNewNew = getQuote();

  let quote = datNewNew.quote;
  let author = datNewNew.author;
  let color = getColor();

  $("#quote-text").animate({ opacity: 0 }, 1000, function() {
    $(this).animate({opacity: 1}, 1000);
  });

  $("#quote-author").animate({ opacity: 0 }, 1000, function() {
    $(this).animate({opacity: 1}, 1000);
  });

  $("html body").animate(
    {
      backgroundColor: color,
      color: color
    },
    2000
  );

  $(".button").animate(
    {
    backgroundColor: color,
    },
  2000
  );

  $("#text").text(quote);
  $("#author").text(author);
}

const getColor = () => {
  return colors[Math.round(Math.random() * colors.length)];
}

$(document).ready(function() {
  getQuotes().then(() => {
    newQuote();
  })
})