全寬滑塊 - 交叉淡入淡出轉換問題

Question

我有一個全寬橫幅，我想淡入和淡出到不同的圖像中。它做它應該做什麼，但我的問題是在淡出期間顯示的白色背景 - 所以我正在尋找交叉淡入淡出......但不確定如何去做。

我的HTML是像這樣

<div id="backgroundimg"> 
    <div class="row copy limitedwidth extra-pad"> 
    <h1> Stay somewhere amazing </h1> 
    <h1> this summer </h1> 
    <p class="lrgfont hidden-xs">From city centre boutique to beach side mill, and arctic cabin to honeymoon suite. Discover our range of unique, friendly and affordable places to stay and you’ll never look at budget accommodation in the same way again! </p> 
    </div> 
    </div> 

我的CSS是像這樣

#backgroundimg { background-image: url('/sites/default/files/Pwll_Deri_landing.jpg'); background-repeat: no-repeat; background-position: 50% 66%; border-bottom: 1px solid #AAA6A6; min-height: 295px; } 
.image-0 { background-image: url('/sites/default/files/Pwll_Deri_landing.jpg') !important; background-position: 50% 66% !important; } 
.image-1 { background-image: url('/sites/default/files/seaside-large.jpg') !important; background-position: 50% 66% !important; } 
.image-2 { background-image: url('/sites/default/files/london-large.jpg') !important; background-position: 50% 66% !important; } 

及以下

$(document).ready(function(){ 
    var seconds = 5000; 
    var step = 0; 
    var limit = 3; 

    $("#backgroundimg").addClass("image-"+step).fadeIn(500); 

    setInterval(function(){ 
    $("#backgroundimg").fadeOut(500,function(){ 
     $(this).removeClass("image-"+step); 
     step = (step > limit) ? 0 : step + 1; 
     $("#backgroundimg").addClass("image-"+step).fadeIn(500); 
    }); 
    },seconds); 
}); 

Answer 1

如果你只是想跨淡出效果我的JS，那麼你應該儘量使用css transitions，它們使用起來更方便。繼承人簡單gallery功能，這是剛剛設置active類圖像和動畫是css：

function initGallery(el) { 
 
    var total = $('img', el).length, 
 
    current = 0; 
 

 
    return function animate(dur) { 
 
    $('img', el).eq(current) 
 
     .addClass('active') 
 
     .siblings() 
 
     .removeClass('active'); 
 

 
    current++; 
 

 
    if (current == total) { 
 
     current = 0; 
 
    } 
 

 
    setTimeout(animate, dur || 2000) 
 
    } 
 
} 
 

 
initGallery('.gallery')(4000);

.gallery { 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.gallery img { 
 
    max-width: 100%; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    opacity: 0; 
 
    transition: opacity 1s; 
 
} 
 

 
.gallery img.active { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="gallery"> 
 
    <img src="//c5.staticflickr.com/8/7619/26712346812_a6f1def27d_b.jpg" alt=""> 
 
    <img src="//c5.staticflickr.com/8/7342/26205959324_729113fa7a_h.jpg" alt=""> 
 
    <img src="//c6.staticflickr.com/8/7331/26206092373_90604c520b_b.jpg" alt=""> 
 
</div>