jQuery滑块：fadeIn / fadeOut效果不适用于第一张幻灯片

Question

我有一个简单的图像幻灯片，并使用jQuery淡出一个淡入另一个，但效果仅在第一次之后有效。

jQuery的：

    setInterval(function() {
        jQuery('#slider > div:nth-child(2)')
            .fadeOut()
            .next()
            .fadeIn()
            .end()
            .prependTo('#slider');

            jQuery('#slider > div:nth-child(1)')
                .fadeOut()
                .next()
                .fadeIn()
                .end()
                .prependTo('#slider');

    },  5000);

CSS：

#slider > div:nth-child(1){
    display:none;
}

Answer 1

我认为这与你的前置和隐藏第一个元素有关。试试这个（代码中的注释解释发生了什么）：

＆＃13;

＆＃13;

setInterval(function() {

    // get first and second slides:
    var slide = jQuery('#slider > div:nth-child(1)'),
        nextSlide = slide.next();
  
    // fadeOut the first slide
    slide.fadeOut('slow', function () {
      // when animation is finished fade in second slide and move first slide to second place ready for animation to repeat in reverse 
      nextSlide.fadeIn('slow').after(slide);
    });

}, 5000);

＆＃13;

#slider {
  position: relative;
}

#slider > div:nth-child(2) {
  display: none;  // always hide 2nd slide
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
  <div>Test</div>
  <div>Test1</div>
  <div>Test2</div>
  <div>Test3</div>
</div>

＆＃13;

＆＃13;

＆＃13;