jquery中四个div的淡出/淡入淡出帮助

我有四个div元素，这些元素在父项div之下。这些div s充满了PHP文件中的数据。我通过jQuery的.getJSON()获得了数据。无论如何，我需要fadeIn()/这些divs在一定的顺序。这是我的。jquery中四个div的淡出/淡入淡出帮助

$("#images #image1").fadeOut(2000); //do this first 
$("#images #image2").fadeIn(2000); 
$("#images #image2").fadeOut(2000); //then this 
$("#images #image3").fadeIn(2000); 
$("#images #image3").fadeOut(2000); //then this  
$("#images #image4").fadeIn(2000); 
$("#images #image4").fadeOut(2000); //then this 
$("#images #image1").fadeIn(2000); //then this

这是我的index.php文件，其中包含jQuery和CSS，如果有帮助！

<style type="text/css"> 
    #container { 
    width:320px; 
    position:relative; 
    height:60px; 
    overflow:hidden; 
     } 

     #images { 
    height:60px; 
    width:320px; 
    } 

    #images #image1 { 
    float:left; 
    } 

    #images #image2 { 
    float:left; 
    display:none; 

    } 
    #images #image3 { 
    float:left; 
    display:none; 

    } 
    #images #image4 { 
    float:left; 
    display:none; 



    } 

    </style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2  /jquery.js"></script> 
<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
//this function will display images from the database 
//path is the name of the image 
//images is the directory where the images are stored 

    $("document").ready(function() { 

    $.getJSON('slide.php', function (data) { 
      //alert("Data loaded"); 
     $.each(data, function (i, item) { 
     $("#images").append('<div class="imageone" id="image1"><img src="images/' + item.path + '" width="80px" height="60px"/>' + '</div>'); 
     }); 

    }); 

    $.getJSON('f_steptwo.php', function (data) { 
     $.each(data, function (i, item) { 
      $("#images").append('<div class="imagetwo" id="image2"><img src="images/' + item.path + '" width="80" height="60"/>' + '</div>'); 

    }); 

}); 
     $.getJSON('f_stepthree.php', function (data) { 
     $.each(data, function (i, item) { 
      $("#images").append('<div class="imagethree" id="image3"><img src="images/' + item.path + '"  width="80" height="60"/>' + '</div>'); 

      }); 
     }); 
     $.getJSON('f_stepfour.php', function (data) { 
     $.each(data, function (i, item) { 
      $("#images").append('<div class="imagefour" id="image4"><img src="images/' + item.path + '" width="80" height="60"/>' + '</div>'); 
     }); 

      $("#images #image1").fadeOut(2000); 
      $("#images #image2").fadeIn(2000); 
      $("#images #image2").fadeOut(2000); 
      $("#images #image3").fadeIn(2000); 
      $("#images #image3").fadeOut(2000);  
      $("#images #image4").fadeIn(2000); 
      $("#images #image4").fadeOut(2000); 

      $("#images #image1").fadeIn(2000); 

    }); 
}); 
    </script> 
    </head> 
    <body> 
    <div id="container"> 
    <div id="images"> 
    </div> 
    </div>

然后这整个过程需要每三秒左右重复一次。任何将不胜感激。这需要在页面加载时发生。

来源

2011-08-27 user915958

如果你不想，直到前一个已完成的动作发生，你可以把它放在一个回调，为您上面提到的代码，它是这样的：

$("#image1").fadeIn(2000); //do this first 
$("#image2").fadeOut(2000, function() { 
    $("#image2").fadeOut(2000); //then this 
    $("#image3").fadeIn(2000, function() { 
     $("#image3").fadeOut(2000); //then this  
     $("#image4").fadeIn(2000, function() { 
      $("#image4").fadeOut(2000, function() { //then this 
       $("#image1").fadeIn(2000); //then this 
      }); 
     }); 
    }); 
});

既然你要重复很多次他们将在回调将是疯狂的行动，这样的事情会更适合：

var elements = ["#image1", "#image2", "#image3", "#image4"]; 
$(elements.join(',')).hide(); 
$(elements[0]).show(); 

var currentElement = 0, 
    nextElement = function() { 
     $(elements[currentElement]).fadeOut(2000); 
     currentElement++; 
     if (currentElement === elements.length) { 
      currentElement = 0; 
     } 
     $(elements[currentElement]).fadeIn(2000); 
    }; 
setInterval(nextElement, 3000); // edit this to change the delay between images

我假设你想制作幻灯片，其中一个图像出现在同一地点之前的图像消失，在这种情况下，而不是做float: left不过，我想你可能想要做的：

#images div { 
    position: absolute; 
    left: 0px; 
}

这将使它所以所有的div堆叠在彼此的顶部，而不是多个div的并排侧。

此外，您不需要在选择器中放置#images，id标签在页面上应该是唯一的，所以当使用id（使用＃）引用时，您不需要任何其他选择器。它应该只是$（“＃image1”）。

来源

2011-08-27 23:29:25

我很高兴有人表现出这家伙如何使用变量，LMFAO。 – alt

你可以试试这个凌乱的回调嵌套：

setInterval(function(){ 
    $("#images #image1").fadeOut(2000, function(){ 
     $("#images #image2").fadeIn(2000, function(){ 
      $("#images #image2").fadeOut(2000,function(){ 
       $("#images #image3").fadeIn(2000, function(){ 
        $("#images #image3").fadeOut(2000, function(){ 
         $("#images #image4").fadeIn(2000, function(){ 
          $("#images #image4").fadeOut(2000, function(){ 
           $("#images #image1").fadeIn(2000, function(); 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}, 16100);

来源

2011-08-27 23:50:39 Pablo

jquery中四个div的淡出/淡入淡出帮助

回答

相关问题