Question

以下是相关代码 - https://codepen.io/illpill/pen/VbeVEq

function newColor() {
    var randomNumber = Math.floor(Math.random() * (colors.length));
    document.body.style.backgroundColor = colors[randomNumber];
}

现在这是newColor（）函数......

当按钮发出咔嗒声时，我希望它能顺利过渡到下一个引号而不是突然加载它。我也希望报价淡入白色然后变成新的报价......这是如何实现的？使用jQuery更好吗？

谢谢！

Answer 1

为background-color属性添加转换到您的身体。

body {
  transition : background-color 1s ease-in-out;
}

要向您应该编写的任何元素添加转换，

element-selector {
  transition: [CSS property] [duration] [timing-function];
}

对于标题标签，它将是

h3,h4 {
  transition: [css property] [duration] [timing-function]
}

转换仅在为给定元素指定的CSS属性发生更改时才有效。

Answer 2

您可以使用CSS淡化背景（就像其他人在此处所示），但您必须使用JavaScript来淡入淡出文本。这是随机状态之间的working version with the quote and author fading：

$('#quote').fadeOut(400,function(){
  $(this).html(quotes[randomNumber][0]).fadeIn();  
});
$('#author').fadeOut(400,function(){
  $(this).html(quotes[randomNumber][1]).fadeIn();  
});

Answer 3

保持代码不变并添加css属性：

.your-element-selector {
  transition: all ease 500ms;
}

或者使用JS：

document.body.style.transition = 'all ease 500ms';

如何顺利更改背景颜色？

3 个答案: