Aparicion de elementos de forma escalonada

[madman_18]

Buenos días a todos!

Quería preguntaros:

Tengo una lista de la siguiente forma:

Código HTML:

<ul>
 <li>opcion 1</li>
 <li>opcion 2</li>
 <li>opcion 3</li>
 <li>opcion 4</li>
</ul>
 

Y me gustaría hacer de forma gradual (mostrar el 1, cuando acabe el 2, etc etc...) pero no consigo el efecto deseado siempre se me muestran todos de golpe.
La lista está con display:inline-block; si lo pongo el efecto de aparición por cada uno, me los pone uno debajo del otro.

Gracias por la ayuda!

[oms02]

Hola madman.

Pues mira, es que falta un poquito de codigo o de explicacion en lo que quieres, pero me voy a atrever a adivinar.

Quieres que se muestre ese listado de forma gradual (como con una animacion), de forma que se muestre 1º el 1º, luego el 2º, etc....

muchos metodos de jquery proveen de un callback, que no es mas que una funcion que se ejecuta cuando el metodo ha completado su funcion.

Si lo que quieres es (mediante una animacion):
muestra el 1º-----mostrando--->acaba el 1º:muestra el 2º---mostrando---->...

Seria algo asi como:

Código Javascript:

$("ul li:first").fadeIn("slow",function(){//la funcion es el callback
   $(this).next().fadeIn("slow",function(){//esta funcion se ejecutara cuando acabe el mostrado del primer elemento: le estas diciendo, el siguiente elemento a este, lo mismo, que se muestre
      ....//sigues
   });
 
});
 

Pero a medida que improviso estas lineas me entra la sensacion de lo que te digo:

- Me he visto obligado a utilizar el metodo .next() y el pseudoselector :first porque en tu codigo no pones que utilices ningun atributo "id" o "title", etc.... Con atributos la cosa cambiaria.
- No se si estas buscando que los elementos de la lista aparezcan con animate, con fadeIn, con show, ....
- Deben aparecer a la derecha del anterior??

Incluso el codigo que te pongo me parece bastante feo ya que es un apaño bastante feo. Con mas informacion supongo que se puede poner mas majo.

Espero haberte ayudado.

Un saludo!

[Reedyseth]

@oms02 probaste Tú código y te funcionó ?

@madman_18 disculpa el codigo que te voy a compartir, pero funciona y hace lo que pediste, utiliza un timer con la función setTimeOut() y algo de programación de Javascript Avanzada llamada 'closures'.

El Javascript o mas bien jQuery:

Código Javascript:

jQuery(function($) {
    $('ul li').hide();
 
    showElement();
 
    function showElement() {
        // obtener número de elementos
        var numElementos = $('ul li').length;
        var i = 0;
        var tiempoDelay = 650;
 
        function mostrar() {
            $('ul li:eq('+i+')').stop().show("slow");
            if(i < numElementos) {
                setTimeout(mostrar,tiempoDelay);
                i++;
            }
        }
        setTimeout(mostrar,tiempoDelay);
    }
});
 

Tu html, si ya lo integras a un sitio solo es cuestión de que juegues con los selectores.

Código HTML:

<ul>
     <li>opcion 1</li>
     <li>opcion 2</li>
     <li>opcion 3</li>
     <li>opcion 4</li>
</ul>
 

Saludos

[oms02]

que va, lo hice super "a pelo".

[Reedyseth]

Iniciado por oms02

que va, lo hice super "a pelo".

También me ha pasado a mí jejeje, pero quería ver si te había funcionado

[madman_18]

Gracias por las ayudas!!! ;) Perdón por no contestar antes pero no sé por qué no me han llegado los emails de que habíais escrito

Mañana lo podré probar con más tranquilidad y os comento :D :D

Gracias!

[Reedyseth]

No te llegan por que no estas suscrito el tema para notificaciones futuras o instantaneas con email. Vete a la parte de arriba en el menú y te vas a herramientas>seguir tema, y ahi seleccionas como quieres recibir la notificación.

La otra forma es que si te hayas suscrito pero no te llegan por email las notificaciones, en tal caso te vas en el menú de esta arriba en la parte de preferencias>temas que sigues, y ahi puedes ver la actividad.

Saludos !!

[madman_18]

Ya, ahora sí me llegan. Se ve que en este caso se me pasó marcar la opción de que me enviase notificaciones.... :D :D :D.

Por cierto.... se me pasó comentar, oms02, que sí, los elementos deben aparecer a la derecha del otro si hay espacio....

Quiero decir tendrían que aparecer:
1 - 2 - 3 - 4 ó
1 - 2 - 3
- 4
etc...
etc.....

[Reedyseth]

Bueno eso ya es mas de estilo que de Javascript :p, para que salgan de la manera que quieres basta con ponerle un float left a cada elemento 'li'

Código CSS:

ul li {float: left;}