从左到右逐个淡入

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>

- Heli

---

在 Fiddle 中，你提供了带有“.fade-right1”的代码？这个元素在哪里？ - Nishit Maheta

哦，我把它删掉了，那只是一些实验，让它一个接一个地淡入。忘记从脚本中删掉了。抱歉。 - Heli

好的，你想要在fade-right中淡化div块吗？ - Nishit Maheta

是的，基本上只要它们一个接一个地淡入，任何实现都应该没问题。 - Heli

Answer 1

请使用以下代码。查看演示。

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;
   });
 });

- Nishit Maheta

Answer 2

请尝试这个：

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

演示

- USER10