如何逐漸淡出和逐漸在div中淡入

Question

我想依次淡出所有元素，然后淡入所有具有新數據的元素。

我所做的事情只能完成我的目標的50％，因為只有fadeIn順序發生，淡出同時發生在所有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); $(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/