2010-02-28 8 views
5

Il mio javascript non è al momento disponibile e sono sconcertato da questo!Scalling list con jQuery

Ho bisogno di creare un elenco animato con javascript come questo - http://www.fiveminuteargument.com/blog/scrolling-list.

Quello che voglio è quello di prendere una lista in questo modo

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
    <li>Item 6</li> 
</ul> 

e display a due in una sola volta, poi visualizzarli in un ciclo, 2 alla volta.

Anche lo pseudo codice può essere d'aiuto per iniziare.

+0

Cosa c'è di sbagliato con le informazioni fornite dal link che hai dato? – Dancrumb

+0

Manca un passaggio: non spiega come passare dall'elenco come sopra all'effetto che descrive. Il mio javascript non è abbastanza buono da ottenere come aggiungere/rimuovere elementi. – Chris

+0

Ciao Chris. Sono l'autore di quel tutorial. Il mio obiettivo era di descrivere ogni singolo passo, quindi mi dispiace se manca qualcosa. Il codice è disponibile per il download proprio nell'articolo e suggerirei che è il posto migliore per iniziare. Se avete domande specifiche, sarei felice di rispondere loro - idealmente tramite l'indirizzo email che si trova dietro il link "contatto" sul mio sito. –

risposta

3

Con l'html incluso nel messaggio, è possibile eseguire quanto segue.

$(document).ready(function(){ 
    //hide all the list items 
    $("ul li").hide(); 
    //call the function initially 
    show_list_item(); 
}); 

function show_list_item(){ 
    //fade in the first hidden item. When done, run the following function 
    $("ul li:hidden").first().fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
      $("ul li").hide(); 
     } 
     //call this function again - this will run in a continuous loop 
     show_list_item(); 
    }); 
} 
+0

Grazie a yuval - I get $ ("ul li: hidden") non è un errore di funzione quando viene eseguito. Sto usando la versione 1.3.2, quindi non sono sicuro del perché. – Chris

+0

hai incluso jQuery? Questa è la prima cosa che ti viene in mente quando ottieni una non-funzione con il simbolo del dollaro. Avete altre librerie JS incluse? Prova a provare questo in una pagina con solo jquery incluso, questo codice e l'html incluso. Dovrebbe funzionare senza problemi con 1.3.2. Assicurati inoltre di avvolgere js con '' o includerlo in un file separato. Fammi sapere come va. –

+0

Hmmm, stesso errore: ho inserito il file html in chiaro qui: http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/test.html. – Chris

0

Basta una modifica al codice di Yuval, per ottenere il 'due alla volta' di lavoro comportamento:

$(document).ready(function(){ 
    //hide all the list items 
    $("ul li").hide(); 
    //call the function initially 
    show_list_item(); 
}); 

function show_list_item(){ 
    //fade in the first hidden item. When done, run the following function 
    $("ul li:hidden:first").fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
     $("ul li").hide(); 
     } 
    }); 
    $("ul li:hidden:first").fadeIn("slow", function(){ 
     //if there are no more hidden list items (all were shown), hide them all 
     if($("ul li:hidden").length == 0){ 
     $("ul li").hide(); 
     } 
     //call this function again - this will run in a continuous loop 
     show_list_item(); 
    }); 
}