Javascript 如何缓慢更改引导div的内容

我有一个html页面，可以通过单击按钮来更改某些内容（我使用的是onClick）。我让它工作得很好

现在我想尝试给它添加一些效果，这样当点击按钮时，文本、背景颜色等应该缓慢地改变（在3-5秒内）。在引导中，它被称为淡入淡出效果

我可以通过在此处修改现有代码来实现这一点：

函数myFunction（）{
document.getElementById（“idQuote”）.innerHTML=“玩总比什么都不做好。”；
document.getElementById（“idQuoteBy”）.innerHTML='-孔子（哲学家，公元前551-479年）'；
document.body.style.background='#ffc0cb'；
document.getElementById（“我的内容”）.style.backgroundColor='#db7093'；
document.body.style.color='pink'；
}

正文{
背景色：#fff8dc；
字体：Verdana，Helvetica，无衬线；
颜色：栗色；
}
#我的内容{
背景色：#ffdead；
保证金：200px 50px 100px 50px；
边界半径：10px；
}
.引用{
保证金：0px 50px 0px 50px；
文本对齐：居中；
}
quoteBy先生{
利润率：0px 25px 0px 0px；
文本对齐：右对齐；
}
.buttonLine{
保证金：50px 0px 0px 0px；
}
#新报价按钮{
显示：内联块；
垂直对齐：顶部；
利润率：0px 0px 50px 450px；
}

敏捷的棕色狐狸跳过了懒狗！敏捷的棕色狐狸跳过了懒狗！

……敏捷的狐狸
新报价
编辑人：某人姓名

只需在主体中添加一些转换属性即可。请参见下面的示例。我希望它能帮助你

函数myFunction（）{
document.getElementById（“idQuote”）.innerHTML=“玩总比什么都不做好。”；
document.getElementById（“idQuoteBy”）.innerHTML='-孔子（哲学家，公元前551-479年）'；
document.body.style.background='#ffc0cb'；
document.getElementById（“我的内容”）.style.backgroundColor='#db7093'；
document.body.style.color='pink'；
}

正文{
过渡：所有1.5s都易于输入输出；//添加一些过渡
背景色：#fff8dc；
字体：Verdana，Helvetica，无衬线；
颜色：栗色；
}
#我的内容{
背景色：#ffdead；
保证金：200px 50px 100px 50px；
边界半径：10px；
}
.引用{
保证金：0px 50px 0px 50px；
文本对齐：居中；
}
quoteBy先生{
利润率：0px 25px 0px 0px；
文本对齐：右对齐；
}
.buttonLine{
保证金：50px 0px 0px 0px；
}
#新报价按钮{
显示：内联块；
垂直对齐：顶部；
利润率：0px 0px 50px 450px；
}

敏捷的棕色狐狸跳过了懒狗！敏捷的棕色狐狸跳过了懒狗！

……敏捷的狐狸
新报价
编辑人：某人姓名

只需在主体中添加一些转换属性即可。请参见下面的示例。我希望它能帮助你

函数myFunction（）{
document.getElementById（“idQuote”）.innerHTML=“玩总比什么都不做好。”；
document.getElementById（“idQuoteBy”）.innerHTML='-孔子（哲学家，公元前551-479年）'；
document.body.style.background='#ffc0cb'；
document.getElementById（“我的内容”）.style.backgroundColor='#db7093'；
document.body.style.color='pink'；
}

正文{
过渡：所有1.5s都易于输入输出；//添加一些过渡
背景色：#fff8dc；
字体：Verdana，Helvetica，无衬线；
颜色：栗色；
}
#我的内容{
背景色：#ffdead；
保证金：200px 50px 100px 50px；
边界半径：10px；
}
.引用{
保证金：0px 50px 0px 50px；
文本对齐：居中；
}
quoteBy先生{
利润率：0px 25px 0px 0px；
文本对齐：右对齐；
}
.buttonLine{
保证金：50px 0px 0px 0px；
}
#新报价按钮{
显示：内联块；
垂直对齐：顶部；
利润率：0px 0px 50px 450px；
}

敏捷的棕色狐狸跳过了懒狗！敏捷的棕色狐狸跳过了懒狗！

……敏捷的狐狸
新报价
编辑人：某人姓名

在body、my content、idQuote、idQuoteBy like中使用

transition

属性

 -webkit-transition-duration: all 5s;
  transition-duration: all 5s;

---

在body、my content、idQuote、idQuoteBy like中使用

transition

属性

 -webkit-transition-duration: all 5s;
  transition-duration: all 5s;

---

我用了你的建议，它给了我我想要的。谢谢你，我用了你的建议，它给了我我想要的。