Javascript 两幅图像显示之间的淡入白色过渡

我试图在删除图像和显示新图像之间创建过渡效果

我在一个div中有一个图像

，在脚本中的某个时刻，javascript删除了这个图像，并用另一个图像替换它。替换图像的我的JS是：

document.getElementById("avatar-drop").innerHTML = '<img src="/core/script/blueimp/server/php/files/'+file.name+'" width="150" height="150" alt=""/>';

---

您可以使用不透明度技术，但必须创建一个中间元素，以便不丢失不透明度更改的边框：

<div id="avatar-drop" class="avatar">
     <div class="avatar-wrapper">
          <img src="https://tracker.moodle.org/secure/attachment/30912/f3.png" width="150" height="150" alt=""/>
     </div>
</div>

然后更改

.avatar wrapper

编辑

---

演示-

您可以使用jQuery的

fadeIn

和

fadeOut

技术来创建这种效果。然后可以通过脚本添加新图像

$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
$（'div img'）.fadeOut（“慢”，function（）{/*淡出旧图像*/
$（'div'）。附加（''）；/*添加图像*/
$（'div img'）.hide（）.fadeIn（“慢”）；
$（'div img:first child'）.remove（）；/*立即删除旧图像*/
});
});
});
div{
边界半径：50%；
高度：200px；
宽度：200px；
位置：相对位置；
边框：10px实心番茄；
溢出：隐藏；
框大小：边框框；
}
部门经理{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}

改变形象我稍后会尝试做些事情给你看-我今天忙得不可开交。但是为了让你开始。。。当我需要这样做时，我在图片查看器上放了一个与图片查看器大小完全相同的白色div。我隐藏了白色div，在淡出一张图片并在下一张图片中淡出的功能中，我快速淡出了白色div，然后淡出了白色div。与setTimeout进行了一点磨合，我就得到了它。请组合并显示足够的代码（认为：“”），以演示您的问题。理想情况下，在您的问题中创建一个片段（我们可以很容易地复制到我们的答案来解决），或者在这里发布代码，但链接到外部演示（例如，托管在.。外部演示不是必需的，也不是强制性的，但它们确实有帮助。至于重现您的问题所需的代码，这是必需的。感谢您的回答，这看起来确实是我要寻找的，绝对如果您稍后有时间对此进行开发，请不要犹豫！不过，我会站在我这边试试你如何计时动画，使显示新图像的JS在div完全为白色时出现？就像FadeToWhite->DeleteImage->DisplayNewImage->FadeToNormalHi David Thomas，我发布的代码，我相信，基本上是所有需要的，我页面上留下的任何内容都是无关的，现在JS部分所做的只是替换一个HTML元素与另一个。谢谢你的回答，是的，这似乎是唯一的保存边界的方法。但是我需要弄清楚如何制作动画。谢谢！谢谢你的回答，这看起来是一个非常干净和简单的方法来完成这项工作。我将立即尝试实现这项功能，并在完成时更新它/或者如果我已经这样做了我很麻烦。谢谢！没问题！如果图像是通过JS动态添加的，这就是我实现此效果的方法！：）@apatik我已经在我的代码片段中添加了
boxx大小：border box
，但无法重现此问题。如果您可以在a中重现此问题，我将非常乐意为您进行查看！您可以随时预加载。如果您有URL，您可以先预加载图像。下面是一个类似于上面的代码演示，它在淡入int之前预加载图像o视图：.@apatik您可以给
fadeIn
一个反映时间的参数。
.fadeIn（1000）；
例如