與JS褪色多個div

Question

我有兩個或未來可能會更多div與CSS中的背景圖像。我想在循環中淡入淡出。

我想要做這樣的事情，但它不起作用。

$(window).load(function(){ 
 
var divs = $('.fade'); 
 

 

 
function fade() { 
 
    var current = $('.current'); 
 
    var currentIndex = divs.index(current), 
 
     nextIndex = currentIndex + 1; 
 
    
 
    if (nextIndex >= divs.length) { 
 
     nextIndex = 0; 
 
    } 
 
    
 
    var next = divs.eq(nextIndex); 
 
    
 
    next.stop().fadeIn(2000, function() { 
 
     $(this).addClass('current'); 
 
    }); 
 
    
 
    current.stop().fadeOut(2000, function() { 
 
     $(this).removeClass('current'); 
 
     setTimeout(fade, 2500); 
 
    }); 
 
} 
 

 
fade();

#one { 
 
    background-image: url("Test_bg.jpg"); 
 
margin-top: -150px; 
 
min-height: 100%; 
 
background-attachment: fixed; 
 
} 
 

 
#two { 
 
    background-image: url("Test_bg1.jpg"); 
 
margin-top: -150px; 
 
min-height: 100%; 
 
display: block; 
 
background-attachment: fixed; 
 
}

<div id="one" class="fade current"> 
 
</div> 
 
\t <div id="two" class="fade"> 
 
</div>

感謝您的幫助

Answer 1

你是在與原因語法錯誤

$(window).load(function(){ 
 
var divs = $('.fade'); 
 

 

 
function fade() { 
 
    var current = $('.current'); 
 
    var currentIndex = divs.index(current), 
 
     nextIndex = currentIndex + 1; 
 

 
    if (nextIndex >= divs.length) { 
 
     nextIndex = 0; 
 
    } 
 

 
    var next = divs.eq(nextIndex); 
 

 
    next.stop().fadeIn(2000, function() { 
 
     $(this).addClass('current'); 
 
    }); 
 

 
    current.stop().fadeOut(2000, function() { 
 
     $(this).removeClass('current'); 
 
     setTimeout(fade, 2500); 
 
    }); 
 
} 
 

 
fade(); 
 
})

#one { 
 
    color: red 
 
} 
 

 
#two { 
 
    color: blue 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="one" class="fade current">a 
 
</div> 
 
<div id="two" class="fade">b 
 
</div>

結束mising })