当幻灯片放映时，淡出图像出现在屏幕上

Question

我正在尝试实现幻灯片放映，但在淡出过程中，图像和文本在底部显示几毫秒后才完全消失。

jQuery(document).ready(function() {
  $("#slideshow > div:gt(0)").hide();
  setInterval(function() {
    $('#slideshow > div:first').fadeOut(1000)
    `enter code here`
    .next().fadeIn(1000)
      .end().appendTo('#slideshow');
  }, 9000);
});

#slideshow {
  margin: 0px;
  position: relative;
  width: 400px;
  height: 403px;
  padding-left: 250px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
  /*align-items:flex-start;*/
  overflow: visible;
  width: 400px;
  position: relative;
}

<div id="slideshow">
  <div style="display:inline" align: "left !important" padding-left: "40em;">
    <p style="padding-left:0em;width:200px;height: 0px;text-align: start;"><strong class="b1">our aim is</strong>  <strong class="b2">Dedicated</strong>  <strong class="b3">To conducting business affairs using<br />
    the highest standards</strong>
    </p>
    <img src="images/slider-img1 - Copy.jpg" alt="" style="padding-left:45em;" />
  </div>
  <div style="display:inline" align: "left !important" padding-left: "40em;">
    <p style="padding-left:0em; width:200px;height: 0px;text-align: start;"><strong class="b1">our solidity is</strong>  <strong class="b2">equity</strong>  <strong class="b3">Innovation, flexibility, quick and<br />
    high results - oriented work</strong>
    </p>
    <img src="images/slider-img2 - Copy.jpg" alt="" style="padding-left:30em;" />
  </div>
</div>

Answer 1

您的代码有几个问题。我开始尝试理解您的代码，但后来我意识到制作一个更好的示例会更快。

我创建了这个 plunk http://embed.plnkr.co/hiD1eNp1LpVaUHv6Tioh/preview 希望可以帮助您完成所需的工作。

请注意，内联样式只会增加代码的复杂性并使其更难调试和维护。

如果有帮助，请随意根据您的需要调整代码，例如过渡和间隔的延迟和速度。

如果您需要帮助理解我的代码，请告诉我。

当幻灯片放映时，淡出图像出现在屏幕上

Fade out image is showing up in screen when slideshow occurs

html

css

jquery

slideshow