Un casse tête

Bonjour à tous,

Voilà je rencontre un problème sur une action à faire.
j'ai dans une page des <li> donc j'arrive à en récupérer le nombre en jquery. Âpres le chargement de la page j'ai besoin qu'une image s'affiche pendant 3 à 4 seconde sur le premier li et ensuite passe au suivant jusqu'à la fin et celà pendant 2 fois.
Mon script js:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 var nbr = jQuery(".area").length; var i = 0; var j = 1; if( j < 3){ for(i = 0;i < nbr; i++){ //ajout de la class maparea_ suivi du compteur jQuery("#mapsare").attr('class', 'maparea_'+i).fadeIn('slow',5000, function() { // c'est le callback, l'animation est terminée $(this).fadeOut(); }); //i++; if(i == nbr - 1){ j++; } } }
mon html:
Code:

1 2 3 4 5 <div id="mapsare"></div> <ul> <li class="area">Nouveauté</li> <li class="area">Offre</li>.....
et mon css la class mapsare contient une image que je position devant chaque li.
Actuellement s'affiche que le dernier et en plus il ne disparait pas.

Avez-vous une idée.