2010-02-28 26 views
5

Mój javascript nie jest w tej chwili do zera i jestem tym zaskoczony!Scolling list with jQuery

Potrzebuję stworzyć animowaną listę z javascript jak ten - http://www.fiveminuteargument.com/blog/scrolling-list.

Co ja chcę to zrobić tak jak listy

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

i wyświetlanie dwóch na raz, a następnie wyświetlać je w pętli, 2 na raz.

Nawet pseudo kod pomoże mi zacząć.

+0

Co się dzieje z informacjami podanymi przez link dałeś? – Dancrumb

+0

Brakuje kroku - nie wyjaśnia, jak przejść z powyższej listy do opisywanego efektu. Mój javascript nie jest wystarczająco dobry, aby móc dodawać/usuwać elementy. – Chris

+0

Cześć Chris. Jestem autorem tego samouczka. Moim celem było dokładne opisanie każdego kroku, więc przepraszam, jeśli czegoś brakuje. Kod jest dostępny do pobrania na samym początku artykułu i sugeruję, że to najlepsze miejsce do rozpoczęcia pracy. Jeśli masz jakieś konkretne pytania, chętnie odpowiem na nie - najlepiej za pośrednictwem adresu e-mail znajdującego się za linkiem "kontakt" w mojej witrynie. –

Odpowiedz

3

Za pomocą html zawartego w wiadomości można uruchomić następujące czynności.

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

Dzięki yuval - otrzymuję $ ("ul li: hidden") nie jest błędem funkcji, kiedy to działa. Używam 1.3.2, więc nie jestem pewien dlaczego. – Chris

+0

czy włączyłeś jQuery? To pierwsza rzecz, która przychodzi ci do głowy, gdy nie dostajesz funkcji ze znakiem dolara. Czy są dostępne inne biblioteki JS? Spróbuj przetestować to na stronie zawierającej tylko jQuery, ten kod i html. Powinien działać bez problemu z 1.3.2. Upewnij się także, że owinąłeś plik js słowem '' lub umieść go w oddzielnym pliku. Daj mi znać jak idzie. –

+0

Hmmm, ten sam błąd - umieszczam tutaj zwykły plik html: http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/test.html. – Chris

0

Wystarczy modyfikacja kodu yuval jest, aby uzyskać „dwa na raz” zachowania pracy:

$(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(); 
    }); 
} 
Powiązane problemy