The timer runs back every 3 seconds:
var i = 0,
t = setInterval(function () {
i++;
i===3 ? i=0 : false;
$('.slide li').eq(i).fadeIn(300).siblings('li').fadeOut(300);
}, 3000);
But the effect will be flashy white, and the transition is not natural at all. I need a very natural transition effect.
Example of such effect: http://www.5icool.org/demo/20...
Am I using the wrong method?
我想大声告诉你2017-06-28 09:27:51
The effect is described in the link below
.slide{
position:relative;
}
li{
position:absolute;
}
仅有的幸福2017-06-28 09:27:51
Fade in and out is to change the transparency, you can try to use css3 transition
var i = 0,
t = setInterval(function () {
i++;
i===3 ? i=0 : false;
$('.slide li').eq(i).addClass("opacity").siblings('li').removeClass("opacity");
}, 3000);
<style>
.slide li{transition: all .3s; opacity:0;}
<style>