创建流畅的jQuery fadeIn和fadeOut图像

Question

我试图运行完全相同的脚本和css，我使用我完美工作的图像淡入淡出旋转木马移动版本。但是在桌面上，你可以从代码片段中看到，我所能看到的并没有淡出。它只是闪烁并显示背景颜色并淡化下一个图像。我希望有助于使其平滑淡化而不会出现任何故障或任何问题。

＆＃13;

＆＃13;

$.fn.slider = function() {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index;

    $this.find('li:gt(0)').hide();
    setInterval(function() {
        $this.find('li:first-child').fadeOut(3000)
          .next('li').fadeIn(3000)
          .end().appendTo($this);
        var index = $this.find('li:first-child').data('index');
        $controls.find('li.active').removeClass('active');
        $controls.find('li').eq(index).addClass('active');
      },
      4000);
  };


  $('#slider2').slider();

＆＃13;

#slider2 {
  position: absolute;
  background-color: #5A6D77;
  padding: 0;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}

#slider2 img {
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}
.images-list>li {
  width: 100%;
  height: 100%;
  background-size: cover;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
  -webkit-transform: translate3d(0, 0, 0);
  margin: 0;
}
ul {
  list-style: none;
  position: absolute;
  margin: 0;
  padding: 0;
}

.images-list {
  position: absolute;
  -webkit-transform: translate3d(0, 0, 0);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
            <li data-index="0"><img src="https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="1"><img src="https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="2"><img src="https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
            <li data-index="3"><img src="https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"</li>
          </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 1

动画在每次转换时弹回背景的原因是LI标签一个接一个地定位，它们需要在LI上设置position:absolute而彼此重叠。

我还注意到你有background-size：cover，它只适用于背景图片CSS样式，而不是LI标签内的IMG标签。

我修改了HTML以使用背景图片，因此缩放效果更好。

没有更改Javascript。

＆＃13;

＆＃13;

$.fn.slider = function() {
    var $this = this;
    var $controls = $this.nextAll('.controls').first();
    var index;

    $this.find('li:gt(0)').hide();
    setInterval(function() {
        $this.find('li:first-child').fadeOut(3000)
          .next('li').fadeIn(3000)
          .end().appendTo($this);
        var index = $this.find('li:first-child').data('index');
        $controls.find('li.active').removeClass('active');
        $controls.find('li').eq(index).addClass('active');
      },
      4000);
  };


  $('#slider2').slider();

＆＃13;

#slider2 {
  position: absolute;
  background-color: #5A6D77;
  padding: 0;
  margin: 0;
  z-index: -1;
  -webkit-transform: translate3d(0, 0, 0);
}

.images-list>li {
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background-size: cover;
  -webkit-transition: 0s;
  -moz-transition: 0s;
  -ms-transition: 0s;
  -o-transition: 0s;
  -webkit-transform: translate3d(0, 0, 0);
  margin: 0;
}
ul {
  list-style: none;
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin: 0;
  padding: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="slider2" class="images-list">
        <li data-index="0" style="background-image: url(https://images.unsplash.com/photo-1489900464632-5f5907edda24?auto=format&fit=crop&w=1950&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"</li>
        <li data-index="1" style="background-image: url(https://images.unsplash.com/photo-1500440853933-3796d0182c96?auto=format&fit=crop&w=1267&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
        <li data-index="2" style="background-image: url(https://images.unsplash.com/photo-1508233620467-f79f1e317a05?auto=format&fit=crop&w=1268&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
        <li data-index="3" style="background-image: url(https://images.unsplash.com/photo-1509650926597-25eead3b6ca9?auto=format&fit=crop&w=1350&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D)"></li>
      </ul>

＆＃13;

＆＃13;

＆＃13;