Un casse tête

**franck31** · 06/10/2012, 18h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**headmax** · 07/10/2012, 00h48

Salut, si tu as ton code js dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<head>
$(document).ready(function() {
	var nbr = $(".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++;
			}
		}
	}
});
</head>

Il faut un englober ton code dans une fonction événementiel de chargement de ta page.
Bonne soirée.

Un casse tête

jQuery

Vue hybride

Discussions similaires

Partager

Partager