Javascript 如何在JS中淡出图像？

我正在尝试使用JS和fadeIn和fadeOut方法创建幻灯片。问题是下一张图像将淡入，但上一张图像不会淡出

我想在JS代码中切换位置样式，这样当网站加载容器时，容器将接受其中的内容并进行适当的缩放

我创建了一个函数来切换位置样式

以下是我到目前为止得到的信息：

$document.readyfunction{ $slideshow>div:gt0.hide； 功能切换{ document.getElementByIdimg.style.position=绝对值； } 设置间隔函数{ $'slideshow>div:first' .切换 .fadeout 1500 下一个 .fadeIn1500 终止 .附于“幻灯片放映”之后； }, 5000; }; 幻灯片放映{ 位置：相对位置； 顶部：0px； 左：0px； 右：0px； 底部：0px； 宽度：100%； 高度：自动； } .中心img{ 形象定位：从形象出发； 位置：相对位置； 保证金：自动； 宽度：100%； 高度：自动； }

---

将图像设置为div，这样您就可以淡出它了

只需删除切换并在淡出回调函数中执行下一步操作：

这是解决办法

$document.readyfunction{ $slideshow>div:gt0.hide； 功能切换{ document.getElementByIdimg.style.position=绝对值； } 设置间隔函数{ $'slideshow>div:first' .fadeout 1500，功能{ //动画完成。 $this.next.fadeIn1500 终止 .附于“幻灯片放映”之后； } }, 5000; }; 幻灯片放映{ 位置：相对位置； 顶部：0px； 左：0px； 右：0px； 底部：0px； 宽度：100%； 高度：自动； } .中心img{ 形象定位：从形象出发； 位置：相对位置； 保证金：自动； 宽度：100%； 高度：自动； } 前一个不会消失

在代码中：

$('#slideshow > div:first')
  .toggle()
  .fadeOut(1500)

---

查看文档--您正在隐藏它，然后才淡出一个不可见的元素。首先，具有相同ID的多个元素是不合适的

其次，为了获得交叉淡入效果，必须将图像放置在彼此的顶部，并删除切换功能：

这就是你的目标吗

$document.readyfunction{ $slideshow>div:gt0.hide； 函数myToggle{ $.center img.csp位置，绝对值； } 设置间隔函数{ $'slideshow>div:first' .fadeOut1500，函数{myToggle} 下一个 .cssz指数，100 .fadeIn1500 终止 .附于“幻灯片放映”之后； }, 5000; }; 幻灯片放映{ 位置：相对位置； 顶部：0px； 左：0px； 右：0px； 底部：0px； 宽度：100%； 高度：自动； } .幻灯片放映部{ 位置：绝对位置； 顶部：0px； 左：0px； 右：0px； 底部：0px； 宽度：100%； 高度：自动； } .中心img{ 形象定位：从形象出发； 位置：相对位置； 保证金：自动； 宽度：100%； 高度：自动； }

---

哦，我没有意识到。切换是一种方法，那么我该如何调用该函数呢？只是使用一个不同的名称？我认为bRIMOs Bor-你已经涵盖了刚刚删除切换，并在淡出回调函数内做下一件事-祝你好运！很好，这正是我想要的。只需添加，是否可以同时淡入淡出？请参见我的答案切换位置css元素的原因是为了使图像与浏览器正确缩放，容器将重新识别图像。请参见更新的答案。如果您有jquery，那么使用getElementById毫无意义。这并不能回答我的问题。

$('#slideshow > div:first')
  .toggle()
  .fadeOut(1500)