Mostra LIs in base all'ID in sequenza

Question

Sto lavorando alla creazione di un for-loop che chiama un effetto javascript e lo applica a un LI, facendolo in sequenza. Ecco cosa ho:

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

Tuttavia, questo non funziona. Ne ho bisogno per applicare l'effetto a LI # 1, poi LI # 2, LI # 3 ... e così via.

Quello che sto cercando di fare è simile a quello che fa Twitter quando si fa clic sul " più " pulsante in fondo alla pagina solo invece di saltare voglio che si allenti.

EDIT: non posso semplicemente racchiudere le LI in un DIV poiché aggiungerò le LI a un elemento UL.

Tuttavia, se ci fosse un modo per animare l'UL mentre cambiava dimensione, sarei tutto per quello.

Answer 1

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

Dai un'occhiata a show (speed, [callback]) . Dal documento:

  

Mostra tutti gli elementi corrispondenti usando a   animazione aggraziata e sparare un   richiamata facoltativa dopo il completamento.

     

L'altezza, la larghezza e l'opacità di ciascuno   degli elementi corrispondenti vengono modificati   dinamicamente secondo quanto specificato   velocità.

Inoltre, ci sono altri modi per nascondere e rivelare elementi, come fadeIn e < a href = "http://docs.jquery.com/Effects/fadeOut" rel = "nofollow noreferrer"> fadeOut . Dai un'occhiata a http://docs.jquery.com/Effects .

Ho fatto un rapido modello del tipo di cosa che stai cercando con i dati statici:

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

e funziona, quindi è concepibile che tu possa fare qualcosa di simile al seguente e non dovresti preoccuparti del mal di testa di iterare sugli ID degli elementi:

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

Giusto per essere chiari, la chiamata di cui sopra a $ .load presuppone che l'output di / items /? p = 2 sul tuo sito è un gruppo di LI

Answer 2

se si desidera che ognuno appaia alla stessa velocità, ma con un leggero ritardo tra ciascuno, potrebbe essere necessario utilizzare setTimeout ... ad esempio ...

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

Potrebbe sembrare un po 'sciocco, ma se ricordo bene, a meno che non avvolgi il tuo indice (i) in un allegato di qualche tipo, il metodo che esegue vedrà sempre il valore di i come 10.

Answer 3

Inoltre, assicurati che se stai attivando questo su un altro evento che carica nuovi elementi tramite Ajax (come dopo aver fatto clic sul pulsante " Altro "), devi avvolgere la tua logica in .live () disponibile in jQuery 1.3.

Se stai usando jQuery 1.2, puoi invece utilizzare livequery .

Answer 4

Questo dovrebbe farlo, se hai un elenco come questo:

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

È quindi possibile scrivere codice per mostrare gli elementi dell'elenco in sequenza in questo modo:

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

Il codice sta effettuando le seguenti operazioni: Trovare il menu <ul>, mostrarlo, trovare tutti i <li> e nasconderli, associare un evento personalizzato chiamato show che mostra lentamente l'elemento e una volta che viene mostrato completamente cerca di vedere se ci sono <=> accanto ad esso e attiva lo stesso evento per quell'elemento. Quindi filtriamo da tutto il <=> solo il primo e attiviamo questo evento personalizzato per esso, essenzialmente impostando l'effetto domino.

Ecco un esempio al lavoro . Se lo volessi più velocemente, potresti passare da "lento" a "veloce" o in un momento.