Ayuda con fadeout / fadein para cuatro divs en jquery

Tengo cuatro div elements that are under a parent div. Estas divs are filled with data that were in a PHP file. I got the data through the jQuery's .getJSON(). Anyways, I need to fadeIn()/fadeOut() these divs in a certain order. Here is what I have.

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

Here is my index.php file that contains jquery and css if that helps!

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

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.

preguntado el 27 de agosto de 11 a las 23:08

2 Respuestas

If you don't want an action to take place until the previous one has finished, you can put it in a callback, for your above referenced code it would look like this:

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

Since you want the action to repeat many times putting them in callback would be insane, something like this would be better suited:

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

I assume you're trying to make a slideshow, where one image appears in the same spot as the previous images disappears, in that case instead of doing float: left though, I think you might want to do:

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

This will make it so all the divs are stacked on top of each other, rather than having multiple div's side-by-side.

Also, you do not need to put #images in your selector, id tags are supposed to be unique on a page, so when referencing with id's (using the #) you do not need any other selectors. It should just be $("#image1").

Respondido 28 ago 11, 03:08

I'm glad somebody showed this guy how to use variables, lmfao. - alt

You can try this messy callback nesting:

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

Respondido 28 ago 11, 03:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.