Liste de discorde avec jQuery

Mon javascript n'est pas à la hauteur pour le moment et je suis perplexe avec ça!Liste de discorde avec jQuery

J'ai besoin de créer une liste animée avec javascript comme celui-ci - http://www.fiveminuteargument.com/blog/scrolling-list.

Ce que je veux est de prendre une liste comme si

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

et d'afficher deux à la fois, puis les afficher dans une boucle, 2 à la fois.

Même le pseudo code m'aiderait à démarrer.

Source

2010-02-28 Chris

Quel est le problème avec les informations fournies par le lien que vous avez donné? – Dancrumb

Il manque une étape - elle n'explique pas comment passer de la liste ci-dessus à l'effet qu'elle décrit. Mon javascript n'est pas assez bon pour savoir comment ajouter/supprimer des éléments. – Chris

Bonjour Chris. Je suis l'auteur de ce tutoriel. Mon but était d'épeler chaque pas, donc je suis désolé s'il y a quelque chose qui manque. Le code est disponible au téléchargement à la fin de l'article, et je dirais que c'est le meilleur endroit pour commencer. Si vous avez des questions spécifiques, je serais heureux d'y répondre - idéalement via l'adresse e-mail située derrière le lien 'contact' sur mon site. –

Avec le code HTML que vous avez inclus dans votre message, vous pouvez exécuter ce qui suit.

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

Source

2010-02-28 23:38:03

Merci yuval - Je reçois $ ("ul li: hidden") n'est pas une erreur de fonction lorsque cela s'exécute. J'utilise 1.3.2 si, alors je ne sais pas pourquoi. – Chris

avez-vous inclus jQuery? C'est la première chose qui vient à l'esprit lorsque vous obtenez un non-fonction avec le signe dollar. Avez-vous d'autres bibliothèques JS incluses? Essayez de tester ceci dans une page avec seulement jquery inclus, ce code, et le code HTML inclus. Cela devrait fonctionner sans problème avec 1.3.2. Assurez-vous également que vous enveloppez votre js avec '' ou incluez-le dans un fichier séparé. Dites-moi comment ça se passe. –

Hmmm, même erreur - J'ai mis le fichier html simple ici: http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/test.html. – Chris

Juste une modification au code de Yuval, pour obtenir le « deux à la fois » travail de comportement:

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

Source

2010-03-01 16:00:33 DaveS

Liste de discorde avec jQuery

Répondre

Questions connexes