从左到右逐渐淡入

Question

我有让图像从左到右一起褪色的代码，但是我希望它们从左到右逐个淡入。我会怎么做？

代码演示是在http://jsfiddle.net/02dmq1n4/

$(document).ready(function(){ 
 
    $(".fade-right").animate({left:100, opacity:"show"}, 1500); 
 
});

#div1 { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    margin-top: 5%; 
 
    margin-left: 14%; 
 
    background-color: blue; 
 
} 
 

 
#div2, #div3 { 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    margin-top: 5%; 
 
    margin-left: 10%; 
 
    background-color: blue; 
 
} 
 

 
.fade-right { 
 
    width: 100%; 
 
    float: left; 
 
    position: absolute; 
 
    display: none; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 

 
<div class="fade-right"> 
 
    <div id="div1"></div> 
 
    <div id="div2"></div> 
 
    <div id="div3"></div> 
 
</div>

Answer 1

下面的代码使用。检查DEMO

CSS

#div1{ 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin-top: 5%; 
    margin-left: 14%; 
    background-color: blue; 
    display:none; 
} 

#div2,#div3{ 
    width: 100px; 
    height: 100px; 
    float: left; 
    margin-top: 5%; 
    margin-left: 10%; 
    background-color: blue; 
    display:none; 
} 

.fade-right{ 
    width: 100%; 
    float:left; 
    position:absolute; 
} 

JQUERY

$(document).ready(function(){ 
    var delay = 0; 
    $('.fade-right div').each(function(){ 
     $(this).delay(delay).animate({ 
     left:100, opacity:"show" 
    },1500); 
    delay += 1000; 
    }); 
}); 

Answer 2

试试这个，

$(".fade-right div").each(function(index) { 
     $(this).delay(800*index).fadeIn(4000).css({'left':'100'}); 
}); 

Demo