Mostra LIs in base all'ID in sequenza
Domanda
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.
Soluzione
$(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
Altri suggerimenti
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.
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.