jQuery

Question

के साथ स्कॉलिंग सूची इस समय मेरी जावास्क्रिप्ट खरोंच तक नहीं है और मैं इसके साथ फंस गया हूं!

मुझे इस तरह की जावास्क्रिप्ट के साथ एक एनिमेटेड सूची बनाने की आवश्यकता है - http://www.fiveminuteargument.com/blog/scrolling-list।

मैं क्या चाहते हैं तो

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

और प्रदर्शन दो तरह एक बार में एक सूची लेने के लिए, फिर उन्हें एक पाश, 2 एक समय में में प्रदर्शित है।

यहां तक ​​कि छद्म कोड भी मुझे शुरू करने में मदद करेगा।

Answer 1

आपके संदेश में शामिल एचटीएमएल के साथ, आप निम्न को चला सकते हैं।

$(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(); 
    }); 
} 

Answer 2

बस एक संशोधन युवाल के कोड में, व्यवहार काम कर रहे 'एक समय में दो' पाने के लिए:

$(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(); 
    }); 
}