Question

第一张图像直接消失，而第二张图片消失，我希望第一张图像淡出（动画）。

请注意过渡css，请告诉我为什么图像会在任何不透明度变化过渡时直接消失。

jQuery(document).ready(function(){
  'use strict';

  if (jQuery('#home-slider .home-slide').length > 0) {
    var slide = function () {
      jQuery('#home-slider .home-slide').removeClass('current');
      jQuery('#home-slider .home-slide:first').appendTo( jQuery('#home-slider') );
      jQuery('#home-slider .home-slide:first').addClass('current');
    }
    slide();
    setInterval(function () {
      slide();
    }, 4000);
  }
  
});

#home-slider {
  position: relative;
  background-color: #000000;
}

#home-slider .home-slide {
  position: absolute;
  left: 0;
  top: 0;
  
  width: 100%;
  opacity: 0;
  
  transition: opacity 2s;
  transition-timing-function: ease-in;
}

#home-slider .home-slide:first-of-type {
  transition: opacity 2s;
  transition-timing-function: ease-in;
  opacity: .6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="home-slider">
<img src="http://via.placeholder.com/350x150" class="home-slide" />
<img src="http://via.placeholder.com/350x150/ff0000/000000" class="home-slide" />
<img src="http://via.placeholder.com/350x150/0000ff/000000" class="home-slide" />
</div>

Answer 1

试试这个jsFiddle。我想这就是你需要的。我在这里使用了jquery。希望这会对你有所帮助。

＆＃13;

  $(document).ready(function(){
  function infinite() {
      $(".gallery img").each(function(i) {
        $(this).hide();
        $(this).delay(1500*i).fadeIn(1000).fadeOut(500);
      }).promise().done(infinite);
  }
  infinite();
});

＆＃13;

.gallery{ position: relative; width: 180px; }
.gallery img{ width: 100%; position: absolute; left: 0; top: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
 <img src="https://s26.postimg.org/7d09jn2np/image.png" alt="">
 <img src="https://s26.postimg.org/ma8qknfw5/image.png" alt="">
 <img src="https://s26.postimg.org/dt989qb79/image.png" alt="">
</div>

＆＃13;

如何fadeOut和fadeIn而不是fadeIn

1 个答案: