如何使我的 jQuery 幻灯片中的幻灯片平滑淡出？答案

【问题标题】：How can I make the slides in my jQuery slideshow fade smoothly?如何使我的 jQuery 幻灯片中的幻灯片平滑淡出？
【发布时间】：2021-03-09 07:09:27
【问题描述】：

我一直在这个网站上查看一个简单的 jQuery 幻灯片教程 - https://codepen.io/chriscoyier/pen/zKbYzP

我尝试稍微调整一下，这样我就可以通过 background-image 规则添加带有 CSS 的图像，而不是使用 HTML 添加图像。这很有效，但是当幻灯片相互过渡时，我失去了平滑的淡入淡出过渡。有谁知道我该如何解决这个问题？

提前感谢您的任何建议。

这是我的 jsFiddle 链接：https://jsfiddle.net/71pfnkcm/1/

HTML

<div id="slideshow">
   <div id="slide-one" class="slide">
   </div>
   <div id="slide-two" class="slide">
   </div>
   <div id="slide-three" class="slide">
   </div>
</div>

CSS

html {
  position: relative;
  height: 100%;
}

body {
  height: 100%;
}

#slideshow { 
  margin: 50px auto; 
  position: relative; 
  height: 100%; 
  padding: 10px; 
}

.slide {
  width: 100%;
  height: 100%;
  background-size: 100%;
}

#slide-one {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/new-stock-photos.jpg");  
}

#slide-two {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/wildlife-stock-photos.jpg");
}

#slide-three {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/farm-animal-images.jpg");  
}

jQuery

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow');
},  4000);

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

问题是因为您缺少 position: absolute 的 .slide

因为您使用的是默认样式为block 元素的div，所以当您通常将3 个div 添加在一起时，它只会从上到下堆叠，当您在幻灯片上制作动画时， div 在动画到 0% 或 100% 不透明度之前首先显示，这使得幻灯片不能像你想要的那样流畅

因此，您需要将position: absolute 用于.slide 元素，以便它退出当前元素流，并相对于它最近的相对父元素定位，这就是为什么div#slideshow 的样式为position: relative

这是更新后的sn-p

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(2000)
    .next()
    .fadeIn(2000)
    .end()
    .appendTo('#slideshow');
},  4000);

html {
  position: relative;
  height: 100%;
}

body {
  height: 100%;
}

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    height: 100%; 
    padding: 10px; 
}

.slide {
  position: absolute; /* this is what you're missing*/
  width: 100%;
  height: 100%;
  background-size: 100%;
}

#slide-one {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/new-stock-photos.jpg");  
}

#slide-two {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/wildlife-stock-photos.jpg");
}

#slide-three {
  background-image: url("https://www.kimballstock.com/images/animal-stock-photos/farm-animal-images.jpg");  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideshow">
   <div id="slide-one" class="slide">
   </div>
   <div id="slide-two" class="slide">
   </div>
   <div id="slide-three" class="slide">
   </div>
</div>

您还可以通过此article 了解有关position 样式的更多信息

【讨论】：