用jquery和ajax逐个淡化mysql数据1

时间:2012-07-03 17:55:54

标签: php jquery mysql ajax json

您好我正在尝试淡化我从mysql数据库获取的每个数据。

到目前为止我得到了什么:

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

和我的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>";

        }

    }

?>

所以我得到的问题就像你在ajax成功函数上看到的那样我淡出了所有的内容但我想要做的就是逐渐淡化每个数据1我知道你可以使用。

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

但是如何?

任何想法?

1 个答案:

答案 0 :(得分:1)

我得到了答案,我刚刚做了第一件事,它在我脑海中浮现xD但是它起作用了:

在succes函数上我决定隐藏我的容器然后插入数据然后新的div与bolsacargada类将它们的不透明度改为0然后使用每个和动画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)
            }




            },

这里的诀窍是

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

由于索引是每个bolsacargada,它将变成:

300 * 1

300 * 2

300 * 3等