FadeIn mysql data 1 by 1 with jquery and ajax

Question

Hi im currently trying to fadein each data that i get from a mysql database.

Heres what i got so far:

Jquery

$("#coleccionmenu span").click(function() {
        $("#coleccionmenu span").removeClass('focuscoleccion')
        $(this).addClass('focuscoleccion');
        var id = this.id;

        $.ajax({
          url: "respuestabolsas.php",
          type: "POST",
          data: "id=" + id,

          complete: function() {
            //called when complete
          },

          success: function(x) {
          $("#contbolsas").css('display', 'none')
           $("#contbolsas").html(x)
            $("#contbolsas").fadeIn(400)
           hovercolores();
           if ($('#contbolsas > div:contains("Rawr")').length > 0) {
            $("#text").fadeOut()
            return false;
            }
            else{
                $("#text").fadeIn()
               cargamascoleccion(id)
            }




            },

          error: function() {
            //called when there is an error
          },
        });

and my php

<?php
ini_set("display_erros","yes");
require('conexionMYSQL.php');
$conexion = new connection();


$id = $_REQUEST['id'];

$query ="select b.idBolsa,b.Skuref, b.Descripcion, b.Medidas, c.TipoColeccion, cf.ColorFamilia, tp.TipoBolsa from Bolsas b
inner join Coleccion c on b.idColeccion = c.idColeccion
inner join ColoresFamilia cf on b.idColorFamilia = cf.idColorFamilia
inner join TipoBolsas tp on b.idTipoBolsa = tp.idTipoBolsa
where c.TipoColeccion = '$id' 
group by tp.TipoBolsa
order by b.idBolsa DESC limit 0,20";
$result= mysql_query($query, $conexion->conn) or die (mysql_error());
$cantidadLog = mysql_num_rows($result);
$json     = '';

    if($cantidadLog < 20){

        echo "<div id='iku' style='display:none'>Rawr</div>";
        while($datos = mysql_fetch_assoc($result)){

            echo"<div class='cargabolsas'>";
                                    echo"<div class='bolsacargada pointer' style='' id='".$datos["idBolsa"]."'>";
                                    echo"<p id='titbolsa' style='display:none'>".$datos["TipoBolsa"]."</p>";
                                        echo"<p style='display:none'>".$datos["TipoColeccion"]."</p>";
                                        echo"<p style='display:none'>".$datos["Medidas"]."</p>";
                                        echo"<p style='display:none'>".$datos["Descripcion"]."</p>";
                                        echo"<p><img id='chica' src='images/chicas/".$datos["Skuref"].".jpg'></p><br>";
                                        echo"<p style='display:none'><img src='images/medianas/".$datos["Skuref"].".jpg'></p>";
                                        echo"<p style='display:none'><img src='images/grandes/".$datos["Skuref"].".jpg'></p><br>";

                                            $query2 = "select cf.ColorFamilia, cf.rueditaimagen from Bolsas b
                                                inner join Coleccion c on b.idColeccion = c.idColeccion
                                                inner join ColoresFamilia cf on b.idColorFamilia = cf.idColorFamilia
                                                inner join TipoBolsas tp on b.idTipoBolsa = tp.idTipoBolsa
                                                where tp.TipoBolsa = '".$datos['TipoBolsa']."' AND c.TipoColeccion = '".$datos['TipoColeccion']."'
                                                group by cf.ColorFamilia";

                                            $result2 =   mysql_query($query2, $conexion->conn) or die (mysql_error());
                                            echo "<div class='colores' style='margin-left:20px;margin-top:-20px'>";
                                            while($datos2 = mysql_fetch_assoc($result2)){
                                                echo"<p id= '".$datos2["ColorFamilia"]."'><img style='float:left' src='".$datos2["rueditaimagen"]."'></p>";
                                            }
                                            echo"</div>";

                                    echo"</div>";
            echo"</div>";

        }
    }
    else{

        while($datos = mysql_fetch_assoc($result)){


            echo"<div class='cargabolsas'>";
                                    echo"<div class='bolsacargada pointer' style='' id='".$datos["idBolsa"]."'>";
                                    echo"<p id='titbolsa' style='display:none'>".$datos["TipoBolsa"]."</p>";
                                        echo"<p style='display:none'>".$datos["TipoColeccion"]."</p>";
                                        echo"<p style='display:none'>".$datos["Medidas"]."</p>";
                                        echo"<p style='display:none'>".$datos["Descripcion"]."</p>";
                                        echo"<p><img id='chica' src='images/chicas/".$datos["Skuref"].".jpg'></p><br>";
                                        echo"<p style='display:none'><img src='images/medianas/".$datos["Skuref"].".jpg'></p>";
                                        echo"<p style='display:none'><img src='images/grandes/".$datos["Skuref"].".jpg'></p><br>";

                                            $query2 = "select cf.ColorFamilia, cf.rueditaimagen from Bolsas b
                                                inner join Coleccion c on b.idColeccion = c.idColeccion
                                                inner join ColoresFamilia cf on b.idColorFamilia = cf.idColorFamilia
                                                inner join TipoBolsas tp on b.idTipoBolsa = tp.idTipoBolsa
                                                where tp.TipoBolsa = '".$datos['TipoBolsa']."' AND c.TipoColeccion = '".$datos['TipoColeccion']."'
                                                group by cf.ColorFamilia";

                                            $result2 =   mysql_query($query2, $conexion->conn) or die (mysql_error());
                                            echo "<div class='colores' style='margin-left:20px;margin-top:-20px'>";
                                            while($datos2 = mysql_fetch_assoc($result2)){
                                                echo"<p id= '".$datos2["ColorFamilia"]."'><img style='float:left' src='".$datos2["rueditaimagen"]."'></p>";
                                            }
                                            echo"</div>";

                                    echo"</div>";
            echo"</div>";

        }

    }

?>

So heres the problem i got as you can see on the ajax success function i fadeIn all the content but what i want to do is fadeIn each data 1 by 1 i know you can use.

$.each(data,function(key, value){});

but how ?

any ideas?

Answer 1

I got the answer i just did the first thing it came into my mind xD but it worked:

On the succes function i decided to hide my container then insert the data then the new divs with bolsacargada class change their opacity to 0 then use each and animate em.

success: function(x) {
            $("#contbolsas").css("display", "none");
            $("#contbolsas").html(x)
            $(".bolsacargada").css('opacity', '0');
            $("#contbolsas").css("display", "block");
            $(".bolsacargada").each(function(index) {
                $(this).delay(300*index).animate({opacity: 1}, 400);
            });
           hovercolores();
           if ($('#contbolsas > div:contains("Rawr")').length > 0) {
            $("#text").fadeOut()
            return false;
            }
            else{
                $("#text").fadeIn()
               cargamascoleccion(id)
            }




            },

The trick here was

$(".bolsacargada").each(function(index) {
                    $(this).delay(300*index).animate({opacity: 1}, 400);
                });

Since index is each bolsacargada it will turn into:

300*1

300*2

300* 3, etc.