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

短暂的两个图像都在显示。淡入的图像显示在淡出的图像下方。你看到的闪光是身体的白色背景。

我相信你能达到预期效果的一种方法是让一个div包含两个绝对位于其中的图像。将Image1设置为比image2具有更高的z-index，并在Image1上应用淡入淡出动画。

＆＃13;

(c)
(b)
(a)

＆＃13;

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

＆＃13;

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

＆＃13;

jquery fadeout和fadein如何不闪烁

1 个答案: