Zeigen Sie LIS basierend auf ID in Sequenz

Question

Ich arbeite daran, eine For-Schleife zu erstellen, die einen JavaScript-Effekt aufruft und sie auf ein LI anwendet und dies nacheinander tue. Folgendes habe ich:

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

Dies funktioniert jedoch nicht. Ich brauche es, um den Effekt auf Li#1 zu wenden, dann Li#2, Li#3 ... und so weiter.

Was ich versuche zu tun, ist ähnlich wie Twitter, wenn Sie nur auf die Schaltfläche "Mehr" am Ende der Seite klicken, anstatt zu springen, möchte ich, dass sie sich entspannen.

BEARBEITEN: Ich kann die LIS nicht einfach in ein DIV einwickeln, da ich ein UL -Element LIS hinzufügen werde.

Wenn es jedoch eine Möglichkeit gäbe, die UL zu animieren, da sie die Größe veränderte, würde ich alles dafür sein.

Answer 1

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

Sich ansehen Show (Geschwindigkeit, [Rückruf]). Aus dem Doc:

Zeigen Sie alle übereinstimmenden Elemente mit einer anmutigen Animation an und feuern nach Abschluss einen optionalen Rückruf.

Die Höhe, Breite und Deckkraft jedes der übereinstimmenden Elemente werden dynamisch entsprechend der angegebenen Geschwindigkeit geändert.

Es gibt auch andere Möglichkeiten, Elemente zu verbergen und zu enthüllen, wie z. einblenden und ausblenden. Sich ansehen http://docs.jquery.com/effects .

Ich habe ein kurzes Modell über das, was Sie suchen, mit statischen Daten gemacht:

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

Und es funktioniert, es ist also denkbar, dass Sie so etwas wie Folgendes tun können und sich nicht mit den Kopfschmerzen der Iteration über Element -IDs kümmern müssen:

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

Nur um klar zu sein, der obige Anruf zu $ .load nimmt an, dass die Ausgabe von /items/? p = 2 Auf Ihrer Website befindet sich ein Haufen Lis

Answer 2

Wenn Sie möchten, dass jeder mit der gleichen Geschwindigkeit, aber mit einer leichten Verzögerung zwischen jedem, müssen Sie möglicherweise SetTimeout verwenden ... zum Beispiel ...

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

Das mag etwas albern aussehen, aber wenn ich mich richtig erinnere, es sei denn, Sie wickeln Ihren Index (i) in eine Art Gehäuse ein, dann wird die Methode, die ausgeführt wird, immer den Wert von i als 10 sehen.

Answer 3

Stellen Sie außerdem sicher, dass Sie Ihre Logik einwickeln müssen .live() Das ist in JQuery 1.3 erhältlich.

Wenn Sie Jquery 1.2 verwenden, können Sie verwenden LiveQuery stattdessen.

Answer 4

Dies sollte es tun, wenn Sie eine Liste wie SO haben:

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

Sie können dann Code schreiben, um die Listenelemente nacheinander wie folgt anzuzeigen:

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

Der Code macht Folgendes: Finden des Menüs <ul>, zeigen es, alles finden <li> und sie verstecken, ein benutzerdefiniertes Ereignis namens binden show was das Element langsam zeigt und sobald es vollständig gezeigt wird <li> daneben und löst das gleiche Ereignis für dieses Element aus. Dann filtern wir von allen filtern <li> Nur der erste und auslösen dieses benutzerdefinierte Ereignis dafür, wobei der Domino -Effekt im Wesentlichen ausgelöst wird.

Hier ist ein Beispiel dafür bei der Arbeit. Wenn Sie es schneller wollten, können Sie sich "langsam" in "schnell" oder zu einer Zeit ändern.