javascript - JQuery fadeTo() 函数不能在两个元素上正常工作

Question

我不明白为什么 .quote-container 不透明度高于 #new-quote 如果它们在相同的 fadeTo() 函数括号和持续时间是相同的。

我的意思是，在 fadeTo() 动画期间，.quote-container 和 #new-quote 不透明度应该相同，因为示例:不透明度:0.12 和不透明度:0.12，因此它们应该同时停止和开始。但现在，它就像不透明度:0.12 和不透明度:0.20。 #new-quote 元素不透明度应与第一个元素相同。

---

这是我的codepen:见笔BJLPEV卢卡斯 ( @Kestis500 ) 在 CodePen .

---

不幸的是，我无法上传显示正在发生的事情的视频，但两个元素的 css 不透明度相同:0。

这行代码应该以某种方式被破坏:

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));

我做错了什么？

Answer 1

问题出在这几行

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

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

您在 #new-quote 上单独应用动画，这会导致渲染延迟。删除#new-quote 上的动画或将虚拟动画添加到.quote-container。将上面的改成

$("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"
});