Jquery fadeOut/fadeIn de rappel ne fonctionne pas

je m construction d'un petit script pour animer une liste. Voici ma structure html:

<ul>
   <li class="slider"> Item-1 </li>
   <li class="slider"> Item-2 </li>
   <li class="slider"> Item-3 </li>
   ...
   <li class="slider"> Item-13 </li>
   <li class="slider"> Item-14 </li>
   <li class="slider"> Item-15 </li>
</ul>

<button> Next </button>

Je suis en affichant seulement quatre li, à un moment, le bouton "suivant" fadeOut l'affiche de quatre li et fadeIn les quatre prochaines. Mais les fondus sont appliquant les deux ensemble. J'ai essayé d'utiliser la fonction de rappel sur le premier évanouissement, mais je ne peux pas le faire fonctionner.

voici le script:

$('li:gt(3)').css('display', 'none');
//Define the interval of li to display
var start = 0;
var end = 4;
//Get the ul length
var listlength = $("li").length;
$("button").click(function() { 
//FadeOut the four displayed li 
$('ul li').slice(start,end).fadeOut(500, function(){
//Define the next interval of four li to show
start = start+4;
end = end+4;
//Test to detect the end of list and reset next interval
if( start > listlength ){
start = 0;
end = 4;
}
//Display the new interval
$('ul li').slice(start,end).fadeIn(500);
});    
});

Toute indices?

Deuxième fois aujourd'hui, je reçois de recommander le génial jQuery.cycle de plugin. Il va faire de votre vie un beaucoup plus facile. Il est conçu pour les diaporamas, mais s'adapte à votre cas d'utilisation, parfaitement. jquery.malsup.com/cycle
La variable listsize n'est pas défini, voulez-vous dire listlength?
Merci beaucoup, il a l'air très bon! Mais j'aime comprendre les choses, donc si je ne peux pas faire un simple lisse fadeIn/Out sur mon propre, je préfère d'apprentissage avant d'utiliser le plugin nice comme cela. 😉
j'ai simplifier mon code pour ce post et j'ai oublié cette variable, mais ce n'est pas la question de la cause.
C'est parce que votre fonction de rappel est appelée pour chaque élément qui est décoloré.

OriginalL'auteur Joeyjoejoe | 2012-04-17

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *