JQuery Mostrar y Ocultar divs o columnas usando timer

Emerald · #1 (**permalink**) 06/10/2010, 04:22

Hola
Tengo una duda.

Soy nueva usando JQuery, y quiero hacer lo siguiente:

Tengo una tabla con 5 columnas, quiero mostrar una columna por una, primero mostrar la primer columna, despues de 5 segundos, esconderla y mostrar la 2da columna, y asi, hasta mostrar la 5ta y volver a la primera

Todo esto automaticamente, sin presionar algun boton

Si es mas facil, pudiera cambiar las columnas por divs

Podrian ayudarme por favor!!...

mayid · #2 (**permalink**) 06/10/2010, 07:39

En javascript existe el setTimeOut();

Para encadenar, quizas te sirva leer esto:
http://www.desarrolloweb.com/articul...os-jquery.html

Dany_s · #3 (**permalink**) 06/10/2010, 08:21

Esto lo hice con divs, en realidad modifiqué de una lista solo modificando el selector, lo mismo podés usar para columnas, párrafos, span, celdas, si te fijas bien no es nada complicado, esconder uno, mostrar el siguiente
fijate bien los ejemplos de la doc de jquery para recorrer los elementos http://api.jquery.com/category/traversing/
bueno, y selectores, manipulación, efectos y todo

Código Javascript:

Ver original<html>
<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$( function(){   
    //Muestro el primer div
    $("#columnas div:eq(0)").show();
    //cada 1 segundo ejecuto la función mostrar()
    setInterval("mostrar()",1000);
});
mostrar = function(){
    //Oculto el div que se encuentra vivisble
    var div = $("#columnas div:visible").hide();
    //Selecciono el siguiente div que oculte en el paso anterior
    divNext = div.next();
    //Si existe otro div después lo muestro, si no existe quiere decir que es el último, entonces muestro el primero para que la próxima vez que se ejecute la función continue con el segundo
    if(divNext.length){
        divNext.show();
    } else {
        $("#columnas div:eq(0)").show();
    }
};
</script>
<style>
    #columnas>div{width:50px; height:300px; display:none}
    #uno{background:red}
    #dos{background:blue}
    #tres{background:green}
    #cuatro{background:black}
</style>
</head>
<body>
<ul id="columnas">
        <div id="uno"></div>
    <div id="dos"></div>
    <div id="tres"></div>
    <div id="cuatro"></div>
</ul>
</body>
</html>