Problême de MouseOver Jquery
yvermeulen
-
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
avion-f16 Messages postés 20368 Date d'inscription Statut Contributeur Dernière intervention -
Bonjour,
J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :
et HTML :
#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
J'essaie de faire un effet de rollover sur une image avec effet de fondu.
J'ai donc écrit ça :
$("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 :
<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
A voir également:
- Problême de MouseOver Jquery
- Afficher et cacher en jquery ✓ - Forum Javascript
- La faille csrf en jquery ? - Forum Javascript
- [JQuery] requête Ajax après une seconde ✓ - Forum Javascript
- Jquery: refresh element enfant après ajax ✓ - Forum Javascript
- Lightbox Boutons suivants et précédents jquery ✓ - Forum Javascript
5 réponses
Salut.
Je ne suis pas sûr d'avoir bien compris.
Pour le mouseover, tu aimerais lancer le fadeIn à la fin du fadeOut ?
Il suffit de mettre le fadeIn en callback dans le fadeOut.
Exemple :
Je ne suis pas sûr d'avoir bien compris.
Pour le mouseover, tu aimerais lancer le fadeIn à la fin du fadeOut ?
Il suffit de mettre le fadeIn en callback dans le fadeOut.
Exemple :
$("li #base").mouseover(function () {
$("li #base").fadeOut(1000, function() {
$("li #hov").fadeIn(100);
});
});
Bonsoir,
Merci pour votre réponse.
Je vais tenter d'être plus clair :
1° - J'ai une image A, affiché par defaut,
superposée à une image B caché par défaut.
2° - On MouseOver sur l'image A, l'image A fadeOut
- On MouseOver sur l'image A, l'image B fadeIn
3° - On MouseOut sur l'image B (puisque l'image A n'est plus là) , l'image B fadeOut
- On MouseOut sur l'image B, l'image A fadeIn
Sachant que la structure c'est ça :
VOilou :/ =)
Merci pour votre réponse.
Je vais tenter d'être plus clair :
1° - J'ai une image A, affiché par defaut,
superposée à une image B caché par défaut.
2° - On MouseOver sur l'image A, l'image A fadeOut
- On MouseOver sur l'image A, l'image B fadeIn
3° - On MouseOut sur l'image B (puisque l'image A n'est plus là) , l'image B fadeOut
- On MouseOut sur l'image B, l'image A fadeIn
Sachant que la structure c'est ça :
<li> <div avec background image A></div> <div avec background image B></div> <img avec lien> </li>
VOilou :/ =)
Hello,
Merci de vouloir m'aider.
J'ai testé le code que tu m'as donné.
Le truc c'est que faudrait que ça fasse exactement comme là :
http://www.yoann-vermeulen.com/test.html
mais vignette par vignette
Je me suis dit aprés coup que c'etait parce que je faisait ça avec des id (normalement les id sont unique) donc j'ai remplacé par des class mais c'est la même chose.
Merci de vouloir m'aider.
J'ai testé le code que tu m'as donné.
Le truc c'est que faudrait que ça fasse exactement comme là :
http://www.yoann-vermeulen.com/test.html
mais vignette par vignette
Je me suis dit aprés coup que c'etait parce que je faisait ça avec des id (normalement les id sont unique) donc j'ai remplacé par des class mais c'est la même chose.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
