FadeIn / FadeOut Slider 不淡出（JQuery / Javascript）答案

【问题标题】：FadeIn / FadeOut Slider not fading out (JQuery / Javascript)FadeIn / FadeOut Slider 不淡出（JQuery / Javascript）
【发布时间】：2017-12-09 10:01:21
【问题描述】：

我正在制作一个可以淡入淡出的滑块。它正确淡入，但幻灯片立即消失而不是淡出。您知道为什么会发生这种情况以及您将在代码中做的任何更改吗？

感谢您的帮助和建议:)

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

setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);

body {
  box-sizing: border-box;
  padding: 3rem; 
}


.slider {
  background-color: #fff; 
}

.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>


</html>

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

您只需在.slider__slide 上设置position: absolute。您需要使用 absolute 位置，因为您试图将图像放在彼此上，具有绝对位置的元素可以做到这一点，但默认情况下，元素具有 static 位置，static 或 relative 不能相互叠加。

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

setInterval(function() {
    $('.slider > div:first')
        .fadeOut(2400)
        .next()
        .fadeIn(2400)
        .end()
        .appendTo('.slider');
}, 5000);

body {
  box-sizing: border-box;
  padding: 3rem; 
}


.slider {
  background-color: #fff; 
}

.slider__slide {
position: absolute;
}

.slider__slide img {
    display: block;
    height: 100vh;
    width: 100%;
    object-fit: cover; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
  <body>
  <div class="slider">  
    <div class="slider__slide"><img src="https://images.pexels.com/photos/6464/desk-technology-music-white.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 1"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/712321/pexels-photo-712321.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 2"></div>
    <div class="slider__slide"><img src="https://images.pexels.com/photos/715546/pexels-photo-715546.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Image 3"></div>
</div>
</body>


</html>

【讨论】：

谢谢，佩德拉姆！这解决了这个问题:)你能否解释一下为什么会发生这种情况以及为什么绝对位置解决了这个问题？干杯！
@Rafa 不要忘记给出.slider 的相对位置。
@VXp 干杯！！ :)