从左到右淡入淡出

Heli 发表于 Dev

合力

我有使图像从左到右淡入淡出的代码，但我希望它们从左到右一幅淡入淡出。我该怎么办？

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

Nishit Maheta

使用以下代码。检查演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。