Javascript 平稳变化的背景

在我的原始项目中，我使用了与Renewanit（）相同的函数，但仅在开始时使用fadeIn（），并且在加载文档后调用它，fadeIn效果（从不透明度0到1）运行良好

当我尝试创建一个按钮来更改背景时（首先是使不透明度为0，然后更改图像，然后使不透明度为1），我在dev tools中看到，不透明度从1跳到了0.98，它不起作用。尝试了不同的解决方案，但我认为使用setInterval有些东西我无法理解。 这个想法是首先变为全白色，然后更改img，以隐藏图片的加载时间

我一整天都在看帖子和搜索谷歌，没法让它工作。。 我可以简单地得到一些其他的代码来实现这个效果，但我真的很想自己做。（我想学的时候抄袭有什么意义） 如果有人能帮我弄清楚，我会很高兴的

let图像={
img1:'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'，
img2:'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80’，
img3:'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4:'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}
函数更新它（）{
不透明度=1；
让elem=document.getElementById（'bgimage'）；
设num=Math.ceil（Math.random（）*4）；
淡出（）；
elem.style.backgroundImage=`url（${images['img'+num]}）`；
fadeIn（）；
函数fadeIn（）{
设id=0；
id=设置间隔（frameIn，20）；
函数frameIn（）{
不透明度+=0.02；
elem.style.opacity=不透明度；
}
}
函数衰减（）{
设id=0；
id=设置间隔（帧输出，20）；
函数frameOut（）{
不透明度-=0.02；
elem.style.opacity=不透明度；
}
}
}

#bgimage{
不透明度：1；
高度：200px；
宽度：1000px；
边框：1px纯红；
颜色：红色；
}

点击我

您可以将转换添加到css中

let图像={
img1:'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg'，
img2:'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80’，
img3:'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4:'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}
函数更新它（）{
不透明度=1；
让elem=document.getElementById（'bgimage'）；
设num=Math.ceil（Math.random（）*4）；
淡出（）；
elem.style.backgroundImage=`url（${images['img'+num]}）`；
fadeIn（）；
函数fadeIn（）{
设id=0；
id=设置间隔（frameIn，20）；
函数frameIn（）{
不透明度+=0.02；
elem.style.opacity=不透明度；
}
}
函数衰减（）{
设id=0；
id=设置间隔（帧输出，20）；
函数frameOut（）{
不透明度-=0.02；
elem.style.opacity=不透明度；
}
}
}

#bgimage{
不透明度：1；
高度：200px；
宽度：1000px；
边框：1px纯红；
颜色：红色；
过渡：2秒放松；
}

点击我

同时执行递增和递减间隔，相互竞争以上下更改不透明度。这两个时间间隔都不会被清除，所以这种情况永远都会发生。詹姆斯-我怎么能先完成第一个功能，然后再完成另一个功能呢？请注意，这种转换在Firefox中不起作用。