Bonjour à tous !
Je ne parviens pas à faire une simple boucle for avec ceci...
J'ai bien tenté des choses du genre...
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
24
25
26 jQuery(function() { $(".nomProjet").hide(); $("#projet1").hover( function() {$(".projet1").show();$(".projet1").stop().animate({top:14}, 300);}, function() {$(".projet1").stop().animate({top:160}, 300);} ); $("#projet2").hover( function() {$(".projet2").show();$(".projet2").stop().animate({top:14}, 300);}, function() {$(".projet2").stop().animate({top:160}, 300);} ); $("#projet3").hover( function() {$(".projet3").show();$(".projet3").stop().animate({top:14}, 300);}, function() {$(".projet3").stop().animate({top:160}, 300);} ); $("#projet4").hover( function() {$(".projet4").show();$(".projet4").stop().animate({top:14}, 300);}, function() {$(".projet4").stop().animate({top:160}, 300);} ); $("#projet5").hover( function() {$(".projet5").show();$(".projet5").stop().animate({top:14}, 300);}, function() {$(".projet5").stop().animate({top:160}, 300);} ); });
En vain !
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 for(var i = 1; i >= 5; i ++) { $("#projet'+i+'").hover( function() {$(".projet'+i+'").show();$(".projet'+i+'").stop().animate({top:14}, 300);}, function() {$(".projet'+i+'").stop().animate({top:160}, 300);} ); }
Si besoin, voici le bout de code html...
Et le css...
Code html : 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
24
25
26
27
28
29
30
31
32 <body> <a class="lienProjet" id="projet1" href=""> <div class="projet"> <h3>Projet</h3> <p class="nomProjet projet1">Projet 1</p> <!-- il doit afficher ce paragraphe --> </div> </a> <a class="lienProjet" id="projet2" href=""> <div class="projet"> <h3>Projet</h3> <p class="nomProjet projet2">Projet 2</p> <!-- il doit afficher ce paragraphe --> </div> </a> <a class="lienProjet" id="projet3" href=""> <div class="projet"> <h3>Projet</h3> <p class="nomProjet projet3">Projet 3</p> <!-- il doit afficher ce paragraphe --> </div> </a> <a class="lienProjet" id="projet4" href=""> <div class="projet"> <h3>Projet</h3> <p class="nomProjet projet4">Projet 4</p> <!-- il doit afficher ce paragraphe --> </div> </a> <a class="lienProjet" id="projet5" href=""> <div class="projet"> <h3>Projet</h3> <p class="nomProjet projet5">Projet 5</p> <!-- il doit afficher ce paragraphe --> </div> </a> </body>
Code css : 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 .lienProjet { text-decoration:none; } .projet { display:inline-block; width:150px; height:100px; text-align:center; overflow:hidden; background-color:#0CC; } .nomProjet { position:relative; top:160px; left:0; width:100%; padding:2% 0; color:#FFFFFF; font-weight:bold; background-color:rgba(0, 0, 0, 0.5); }
Évidemment, j'en ai plus d'une centaine à faire, pas mortel en soi, mais si la liste venait à grandir...
Pour l'exemple, j'en ai mis 5.
Est-ce possible ?
Si une bonne âme pouvait me venir en aide svp, merci !
Dans l'attente, passez une bonne journée !
Partager