Question

我有一些代码可以使图像从左到右一起淡入淡出，但我希望它们从左到右依次淡入淡出。我该怎么做？

$(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

从左到右逐个淡入

2 个答案: