Mostrar la Bibliotecología basada en la IDENTIFICACIÓN de la secuencia de

Question

Estoy trabajando en la creación de un bucle que se llama un javascript efecto y la aplica a un LI, hacerlo en secuencia.Aquí es lo que tengo:

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

Sin embargo, esto no funciona.La necesito para aplicar el efecto a la LI#1, a continuación, LI#2, LI#3...y así sucesivamente.

Lo que estoy tratando de hacer es similar a lo que Twitter hace cuando usted haga clic en el botón "más" en la parte inferior de la página, sólo que en lugar de saltar quiero que se reduzca.

EDITAR: Yo no puedo simplemente envuelva la LIs en un DIV como voy a estar agregando LIs a un elemento UL.

Sin embargo, si había una manera de animar a la UL como se cambia el tamaño, yo estaría a favor de eso.

Answer 1

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

Eche un vistazo a show (velocidad, [devolución de llamada]) . Del documento:

  

Mostrar todos los elementos coincidentes utilizando un   animación elegante y disparando un   devolución de llamada opcional después de la finalización.

     

La altura, el ancho y la opacidad de cada   de los elementos coincidentes se cambian   dinámicamente de acuerdo con el especificado   velocidad.

Además, hay otras formas de ocultar y revelar elementos, como fadeIn y < a href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut . Eche un vistazo a http://docs.jquery.com/Effects .

Hice una maqueta rápida del tipo de cosas que buscas con datos estáticos:

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

y funciona, por lo que es concebible que pueda hacer algo como lo siguiente, y no tener que molestarse con el dolor de cabeza de iterar sobre ID de elementos:

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

Solo para ser claros, la llamada anterior a $ .load supone que la salida de / items /? p = 2 en su sitio es un montón de LI

Answer 2

si desea que cada uno aparezca a la misma velocidad, pero con un ligero retraso entre cada uno, es posible que necesite usar setTimeout ... por ejemplo ...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

Eso puede parecer un poco tonto, pero si no recuerdo mal, a menos que envuelva su índice (i) en un recinto de algún tipo, el método que se ejecute siempre verá el valor de i como 10.

Answer 3

Además, asegúrese de que si está activando esto en otro evento que carga nuevos elementos a través de Ajax (como después de hacer clic en el botón " More "), entonces debe ajustar su lógica en .live () que está disponible en jQuery 1.3.

Si está utilizando jQuery 1.2, puede utilizar livequery en su lugar.

Answer 4

Esto debe hacerlo, si usted tiene una lista así:

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

Entonces, usted puede escribir código para mostrar la lista de elementos de forma secuencial como este:

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

El código es la siguiente:Encontrar el menú <ul>, mostrando encontrar todos los <li> y la ocultación de ellos, la unión de un evento personalizado llamado show que poco a poco se muestra el elemento, y una vez que esté plenamente demostrado mira a ver si hay alguna <li> junto a él y provoca el mismo evento para ese elemento.Luego que el filtro de todos los <li> sólo el primero, y el gatillo de este evento personalizado para que, esencialmente, de fijar el efecto dominó.

Aquí está un ejemplo de ello en el trabajo.Si usted quería rápido que podría cambiar el 'lento' a 'rápido' o una hora.