jQuery fadeTo（）函数在两个元素上均无法正常工作

Question

I can't understand why the .quote-container opacity is higher than #new-quote if they are in the same fadeTo() function brackets and duration is the same.

What I mean, that during fadeTo() animation, .quote-container and #new-quote opacity should be same, for example: opacity: 0.12 and opacity: 0.12, so they should stop and start at the same time. But now, it's like opacity: 0.12 and opacity: 0.20. #new-quote element opacity should be the same as the first element.

---

There is my codepen: See the Pen BJLPEV by Lukas ( @Kestis500 ) on CodePen .

---

Unfortunately, I can't upload a video showing what is going on but the css opacity on both elements are the same: 0.

This line of code should be broken somehow:

getQuote().done(setTimeout(function() {
  $("#new-quote").outerHeight($(".quote-container").outerHeight());
}, 1000), $(".quote-container, #new-quote").fadeTo(10000, 1));

$(".quote-container, #new-quote").fadeTo(10000, 1));

What am I doing wrong?

Answer 1

The issue is on these lines

$("body,  .button").animate({
  "background-color": colors[randomNumber]
});

$(".quote-text, .quote-author, #new-quote").animate({
  color: colors[randomNumber]
});

You are applying animate separately on #new-quote that cause delay in rendering. Either remove animation on #new-quote or add dummy animation to .quote-container. Change the above to

$("body, .button").animate({
  "background-color": colors[randomNumber]
});
$('.quote-container').animate({
  "padding": "2.5rem"
});

$(".quote-text, .quote-author, #new-quote").animate({
  color: colors[randomNumber]
});

$('.quote-container').animate({
  "padding": "2.5rem"
});