Effet de Rollover et fadeIn

**yvermeulen** · 11/10/2010, 20h11

Bonjour,

J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :

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
$("li #base").mouseover(function () {
  $("li #base").fadeOut(1000);
  });
 
$("li #base").mouseover(function () {
  $("li #hov").fadeIn(100);
  });
 
$("li #hov").mouseout(function () {
  $("li #base").fadeIn(100);
  });
 
$("li #hov").mouseout(function () {
  $("li #hov").fadeOut(1000);
  });

et HTML :

Code html :

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

1
2
3
4
 <ul class="vignette">
 	<li><a href="img/hd/comm-graphiste-magazine-14.png" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-07.jpg" alt="" /></a></li>
	<li><a href="img/hd/illustration-graphiste-09.jpg" rel="shadowbox[tout]"><div id="base"></div><div id="hov"></div><img src="img/bd/graphiste-freelance-25.jpg"  alt="" /></a></li>
    </ul>

#base et #hov sont des div qui contiennent le background qui fond et…défond

en dessous la vignette.

Seulement je voudrais que l'effet agisse image par image et pas une image en mouseover = tout en fade (consulter le lien si dessous pour exemple) :
http://www.yoann-vermeulen.com/test.html

DOnc la solution… de débutant que j'ai trouvé serait de donné une classe pour chaqu'une de mes vignettes… et crée un script unique pour chaqu'une de ses vignettes… mais j'imagine qu'il y a une autre solution.

… help !

Merci par avance

**danielhagnoul** · 16/10/2010, 00h37

Bonsoir

Un id doit être unique, il ne doit exister qu'à un seul exemplaire dans toute la page web !

**yvermeulen** · 22/10/2010, 19h13

Envoyé par danielhagnoul

Bonsoir

Un id doit être unique, il ne doit exister qu'à un seul exemplaire dans toute la page web !

Exact ! j'ai rectifié en mettant des classes, mais ça ne fonctionne plus du tout :/

**danielhagnoul** · 23/10/2010, 22h19

Bonsoir

Si j'ai bien compris votre objectif final, voici un exemple :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" type="text/css" href="../lib/jqueryui/css/humanity/jquery-ui-1.8.5.custom.css">
	<style>
		/* Base */
		body { background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal;
		font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 { font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img { margin:0px; padding:0px; }
		h1 { font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p { padding:6px; }
		div#conteneur { width:95%; min-width:800px; min-height:500px; margin:12px auto; background-color:#FFFFFF;
		color:#000000; border:1px solid #666666; }
 
		/* Test */
		// pas de class hover c'est un mot clé !
		div.baseClass, div.hoverClass {
			position:relative;
			width:100px;
			height:100px;
			margin:12px;
		}
		div.baseClass {
			border:2px solid red;
		}
		div.hoverClass {
			border:2px solid green;
		}
	</style>
</head>
<body>
	<h1>Q. &amp; R. Forum jQuery</h1>
	<div id="conteneur">
		<ul>
			<li>
				<a href="#">
					<div class="baseClass">
						<p>Un mot pour remplir</p>
					</div>
					<div class="hoverClass">
						<p>Un mot pour remplir</p>						
					</div>
					<img src="../images/imageTest.png" />
				</a>
			</li>
			<li>
				<a href="#">
					<div class="baseClass">
						<p>Un mot pour remplir</p>
					</div>
					<div class="hoverClass">
						<p>Un mot pour remplir</p>
					</div>
					<img src="../images/imageTest.png" />
				</a>
			</li>
		</ul>
	</div> 
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.3.min.js"></script>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-ui-1.8.5.custom.min.js"></script>
	<script>
		$(function(){
 
$("div.baseClass").mouseenter(function(){
	$(this).fadeOut(1000);
});
 
$("div.baseClass").mouseenter(function(){
	$(this).siblings("div.hoverClass").fadeIn(100);
});
 
$("div.hoverClass").mouseleave(function(){
	$(this).siblings("div.baseClass").fadeIn(100);
});
 
$("div.hoverClass").mouseleave(function(){
	$(this).fadeOut(1000);
});
 
		});
 	</script>
</body>  
</html>

Effet de Rollover et fadeIn

jQuery

Vue hybride

Discussions similaires

Partager

Partager