Help with fadeout/fadein for four divs in jquery
<p>I have four <code>div</code> elements that are under a parent <code>div</code>. These <code>div</code>s are filled with data that were in a PHP file. I got the data through the jQuery's <code>.getJSON()</code>. Anyways, I need to <code>fadeIn()</code>/<code>fadeOut()</code> these divs in a certain order. Here is what I have. </p>

<pre><code>$("#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 
</code></pre>

<p>Here is my index.php file that contains jquery and css if that helps!</p>

<pre><code> &lt;style type="text/css"&gt;
    #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;



    }

    &lt;/style&gt;
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2     /jquery.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
//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('&lt;div class="imageone" id="image1"&gt;&lt;img src="images/' +  item.path + '" width="80px" height="60px"/&gt;' + '&lt;/div&gt;');
        });

    });

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

    });

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

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

            $("#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);

    });
});
    &lt;/script&gt;
    &lt;/head&gt;
   &lt;body&gt;
  &lt;div id="container"&gt;
   &lt;div id="images"&gt;
   &lt;/div&gt;
   &lt;/div&gt;    
</code></pre>

<p>And then this entire process need to repeat itself every three seconds or so. Any would be greatly appreciated. This needs to happen when the page loads.</p>
