javascript - jquery淡出和淡入如何不闪烁

Question

我有那个 jquery 代码

$(function(){
$('.efectfade img:gt(0)').hide("");
setInterval(function(){$('.efectfade > :first-
child').fadeOut().next('img').fadeIn().end().appendTo('.efectfade');}, 
5000);
});

CSS

 .efectfade {background-size: cover;
    background-position:center;
  background-repeat: no-repeat;
overflow: hidden;
 width: 100%;
 z-index: -1;
 opacity:0.8;
   height: 100%;}

和html

<div class="efectfade">

       <img src="http://cdn.akamai.steamstatic.com/steam/apps/304390/ss_f49a29395ae871
              76ee986dc16eddf9c4a3285231.1920x1080.jpg?t=1511961587">
<img src="
 https://fsmedia.imgix.net/95/59/72/bf/16f7/467c/9232/c85b40a56d06/the
         -brutal-centurion-one-of-the-two-new-heroes-playable-in-
    shadow--might.jpeg">
   </div>

这里是 jsfiddle https://jsfiddle.net/rypz99/pyxjhfbv/ 我的问题是如何在更改图像时不闪烁

Answer 1

片刻，两张图片都在显示。淡入的图像显示在淡出的图像下方。您看到的闪光是 body 的白色背景。

我相信实现所需效果的一种方法是使用一个包含绝对定位的两个图像的 div。将 Image1 设置为比 image2 具有更高的 z-index，并在 Image1 上应用淡入淡出动画。

$(() => {
	$("#container").click(() => {
  	setInterval(() => {
    	$("#image1").fadeOut()
      setTimeout(() => {
      	$("#image1").fadeIn()
      }, 2500)
    }, 5000)
  })
})

#container {
  width: 100px;
  position: realative;
}
img {
  width: 100px;
  position: absolute;
  top: 1;
  left: 1;
}
#image1 {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <image src="http://exchangedownloads.smarttech.com/public/content/a2/a28daee5-573f-4f1d-943d-807b0fc164f5/previews/medium/0001.png" id="image1"/>
  <image src="https://is4-ssl.mzstatic.com/image/thumb/Purple118/v4/ab/5e/0a/ab5e0a5a-7e10-ba06-5ca4-1cffe0cfd753/AppIcon-1x_U007emarketing-85-220-0-5.png/200x0w.jpg" id="image2"/>
</div>