如何逐漸淡出和淡入div

Question

我想逐個淡出所有元素，然後使用新數據淡入所有元素。

因爲只有淡入發生，我所做的只是完成了我目標的50％，淡出同時發生在所有div上。

我想知道我該做什麼錯，以便逐步淡出元素。

任何雖然如何解決這個問題？

定製CSS：

.class4 { 
    width: 24%; 
    height: 100px; 
    float:left; 
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50); 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
    background-position: 50% 6%; 
    background-size: 90%; 
    background-repeat: no-repeat; 


} 
.class3 { 
    width: 24%; 
    height: 100px; 
    float:left; 
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50); 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
    background-position: 50% 6%; 
    background-size: 90%; 
    background-repeat: no-repeat; 

} 
.class2 { 
    width: 24%; 
    height: 100px; 
    float:left; 
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50); 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
    background-position: 50% 6%; 
    background-size: 90%; 
    background-repeat: no-repeat; 

} 
.class1 { 
    width: 24%; 
    height: 100px; 
    float:left; 
    box-shadow: 0px 2px 3px 0px rgba(174,174,174,0.50); 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
    background-position: 50% 6%; 
    background-size: 90%; 
    background-repeat: no-repeat; 
    border-bottom: 1px solid lightgray; 
    border-left: 1px solid lightgray; 
    border-right: 1px solid lightgray; 
} 

Jquery的：

$(document).ready(function() { 
    $('#btn').on('click', function(){ 
var loadTime = 500; 
      $('.class1, .class2, .class3, .class4').each(function (fadeInDiv) { 
       //$(this).delay(fadeInDiv * 500).fadeIn(1000); 
       $(this).fadeOut(loadTime, function() { 
        $(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")'); 
        $(this).fadeIn(loadTime); 
        loadTime += 500; 
       }); 
      }); 
     }); 
}); 

HTML：

<input id = "btn" type="button" ><br><br> 
<div class="class1"></div> 
<div class="class2"></div> 
<div class="class3"></div> 
<div class="class4"></div> 

的jsfiddle：http://jsfiddle.net/xudaR/61/

Answer 1

$(document).ready(function() { 
 
    $('#btn').on('click', function(){ 
 
    var loadTime = 500; 
 
    $('.class1, .class2, .class3, .class4').each(function (fadeInDiv) { 
 
     
 
      $(this).fadeOut(loadTime, function(){ 
 
       $(this).css('background-image', 'url("https://assets.servedby-buysellads.com/p/manage/asset/id/15119")'); 
 
       
 
      }).data('delay', fadeInDiv * 300); 
 
     
 
\t \t \t $(this).fadeIn(loadTime); 
 
      loadTime += 500; 
 
      }); 
 
     
 
    }); 
 
    
 
});

.class4 { 
 
    width: 24%; 
 
    height: 100px; 
 
    float: left; 
 
    box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); 
 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
 
    background-position: 50% 6%; 
 
    background-size: 90%; 
 
    background-repeat: no-repeat; 
 
} 
 
.class3 { 
 
    width: 24%; 
 
    height: 100px; 
 
    float: left; 
 
    box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); 
 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
 
    background-position: 50% 6%; 
 
    background-size: 90%; 
 
    background-repeat: no-repeat; 
 
} 
 
.class2 { 
 
    width: 24%; 
 
    height: 100px; 
 
    float: left; 
 
    box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); 
 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
 
    background-position: 50% 6%; 
 
    background-size: 90%; 
 
    background-repeat: no-repeat; 
 
} 
 
.class1 { 
 
    width: 24%; 
 
    height: 100px; 
 
    float: left; 
 
    box-shadow: 0px 2px 3px 0px rgba(174, 174, 174, 0.50); 
 
    background-image: url('http://assets.servedby-buysellads.com/p/manage/asset/id/25126'); 
 
    background-position: 50% 6%; 
 
    background-size: 90%; 
 
    background-repeat: no-repeat; 
 
    border-bottom: 1px solid lightgray; 
 
    border-left: 1px solid lightgray; 
 
    border-right: 1px solid lightgray; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<input id="btn" type="button"> 
 
<br> 
 
<br> 
 
<div class="class1"></div> 
 
<div class="class2"></div> 
 
<div class="class3"></div> 
 
<div class="class4"></div>

讓我知道這是你想要什麼：code：

http://jsfiddle.net/xudaR/66/