javascript - Jquery焦點圖淡入淡出效果求指教

Question

計時器每隔3秒回走一次：

    var i = 0,
    t = setInterval(function () {
        i++;
        i===3 ? i=0 : false;
        $('.slide li').eq(i).fadeIn(300).siblings('li').fadeOut(300);
    }, 3000);

但這樣出來的效果會閃白，過渡的一點都不自然，我需要那很自然的過渡效果。

這樣的效果範例：http://www.5icool.org/demo/20...

難道我方法用錯了？

Answer 1

效果如下連結描述

.slide{
    position:relative;
}
li{
    position:absolute;
}

Answer 2

淡入淡出就是改變透明度，你可以嘗試用css3的過渡
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>