在一个滑块内，活动幻灯片会淡出，但下一张幻灯片不会淡入；它只是出现。答案

【问题标题】：Within a slider, the active slide fades out, but the next slide doesn't fade in; it just appears.在一个滑块内，活动幻灯片会淡出，但下一张幻灯片不会淡入；它只是出现。
【发布时间】：2015-02-26 00:51:41
【问题描述】：

如何使效果更平滑，以便下一张图像淡入而不是仅仅出现？活动幻灯片淡出，然后在第一张幻灯片淡出为白色后出现下一张。这看起来不太流畅或优雅，我想让淡入/淡出更自然地发生

HTML 是：

<div id="jumbotron"> 
 <div class="slider">

    <img class="img" src="http://photos.travellerspoint.com/203325/Peru_239.jpg" width="100%">

    <img class="img" src="https://kojin.files.wordpress.com/2008/11/sm-08-3281-white-alpaca-pond-white-peaks.jpg" width="100%">
    <img class="img"src="http://cdn.c.photoshelter.com/img-get/I0000aT96V0jJZX4/s/650/650/Alpaca-Wool-Factory-El-Alto-Bolivia-17.jpg" width="100%"> 

    <img class="img"src="https://kitaliana.files.wordpress.com/2011/09/rug_cusco1.jpg" width="100%">

</div>
</div>

JQuery 代码是：

$(document).ready(function() {
  var $slider = $('.slider'); 
  var $slide = 'img';
  var $transition_time = 2000;
  var $time_between_slides = 4000; 

  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});

【问题讨论】：

标签： jquery slider carousel fadein fadeout

【解决方案1】：

您的问题实际上是您的图像没有堆叠在一起。当新图像淡入时，它会在当前图像下方（y 轴，而不是 z 轴）淡入，当您从 DOM 中删除旧图像时，新图像会跳到它的位置，使其看起来好像没有'不要淡入。

添加以下 CSS 以确保所有图像位于相同的坐标，即正确堆叠在彼此之上

.slider { position:relative;}
.slider > .img { position:absolute;}

http://jsfiddle.net/d62v6fq9/1/ 获取基于您的代码的完整示例。

【讨论】：