Mostre LIS baseado em ID em sequência

Question

Estou trabalhando na criação de um loop for que chama um efeito JavaScript e o aplica a um LI, fazendo isso em sequência. Aqui está o que eu tenho:

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

No entanto, isso não funciona. Eu preciso que isso aplique o efeito ao LI#1, então Li#2, Li#3 ... e assim por diante.

O que estou tentando fazer é semelhante ao que o Twitter faz quando você clica no botão "mais" na parte inferior da página apenas em vez de pular, quero que ela diminua.

EDITAR: Não posso simplesmente embrulhar o LIS em uma div, pois vou adicionar LIS a um elemento UL.

No entanto, se houvesse uma maneira de animar o UL, pois mudaria o tamanho, eu seria tudo para isso.

Answer 1

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

Dê uma olhada em Mostrar (Speed, [retorno de chamada]). Do documento:

Mostre todos os elementos correspondentes usando uma animação graciosa e disparando um retorno de chamada opcional após a conclusão.

A altura, a largura e a opacidade de cada um dos elementos correspondentes são alterados dinamicamente de acordo com a velocidade especificada.

Além disso, existem outras maneiras de esconder e revelar elementos, como aparecimento gradual e desaparecer. Dê uma olhada em http://docs.jquery.com/effects .

Fiz uma rápida maquete do tipo de coisa que você procura com dados estáticos:

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

E funciona, por isso é concebível que você possa fazer algo como o seguinte, e não ter que se preocupar com a dor de cabeça de itetar os IDs de elementos:

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

Só para deixar claro, a chamada acima para $ .load assume que a saída de /itens/? p = 2 No seu site está um monte de lis

Answer 2

Se você deseja que cada um apareça na mesma taxa, mas com um pequeno atraso entre cada um, pode ser necessário usar o setTimeout ... por exemplo ...

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

Isso pode parecer um pouco bobo, mas se bem me lembro, a menos que você envolva seu índice (i) em um gabinete de algum tipo, o método que executa sempre verá o valor de I como 10.

Answer 3

Além disso, verifique se você está acionando isso em outro evento que carrega novos itens via Ajax (como depois de clicar no botão "mais"), então você precisa envolver sua lógica em .viver() que está disponível no jQuery 1.3.

Se você está usando o jQuery 1.2, você pode usar LiveQuery em vez de.

Answer 4

Isso deve fazer isso, se você tiver uma lista como:

<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>

Você pode então escrever código para mostrar os itens da lista sequencialmente assim:

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

O código está fazendo o seguinte: Encontrar o menu <ul>, mostrando, encontrando todo o <li> e escondendo -os, vinculando um evento personalizado chamado show que mostra lentamente o elemento e, uma vez mostrado, parece totalmente para ver se há algum <li> ao lado dele e desencadeia o mesmo evento para esse elemento. Então filtramos de todos os <li> Somente o primeiro e aciona esse evento personalizado, desencadeando essencialmente o efeito dominó.

Aqui está um exemplo disso no trabalho. Se você quisesse mais rápido, poderia mudar 'devagar' para 'rápido' ou um tempo.