Javascript / CSS幻燈片：使用透明膠片突出了我不知道如何解決的缺陷

Question

我很想盡可能廣泛地幫助將來的編碼人員，這是一個相當具體的問題。

正如您在jsfiddle中所看到的，此幻燈片似乎對帶有透明膠片的圖片有問題。 有了透明膠片，轉換就會變得很麻煩。 如果可能的話，我希望隨着新圖片的淡入而使舊圖片淡出。

還有一個注意事項：slideshadow div的存在是有原因的，主要用於框陰影的使用，可以更好地控制z-index。

HTML：

<div id="slideshow">
   <img class="active" src="http://i.imgur.com/tqMy9wn.png" alt="" />
   <img src="http://i.imgur.com/vNyEFB0.png" alt="" />
   <div id="slideshadow">&nbsp;</div>
</div>

CSS：

#slideshow {
    position:relative;
    float:left;
    height:245px;
    width:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

#slideshadow {
    position:absolute;
    height:245px;
    width:200px;
    box-shadow:inset 0px 0px 80px 0px rgba(0,0,0,0.75);
    z-index:15;
}

JS：

  function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ($active.length == 0) $active = $('#slideshow IMG:last');

    var $next = $active.next('img').length ? $active.next('img') : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({
        opacity: 0.0
    })
        .addClass('active')
        .animate({
        opacity: 1.0
    }, 2000, function () {
        $active.removeClass('active last-active');
    });
}

$(function () {
    setInterval(slideSwitch, 7000);
});

Answer 1

向透明添加顯式淡入似乎可行：

$active.animate({
    opacity: 0.0
}, 2000);

http://jsfiddle.net/tbyccesq/