Question

如果.quote-container不透明度高于#new-quote，如果它们位于相同的fadeTo()函数括号中且持续时间相同，我就无法理解。

我的意思是，在fadeTo()动画期间，.quote-container和#new-quote不透明度应该相同，例如：不透明度：0.12和不透明度：0.12，所以它们应该停止并从同一时间。但现在，它就像不透明度：0.12和不透明度：0.20。 #new-quote元素不透明度应与第一个元素相同。

有我的代码笔：在BJLPEV上查看Lukas的笔@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"
});

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

1 个答案: