Ajouter fadeIn /fadeOut au changement d'image par mouseover

**gOO69** · 13/11/2014, 10h08

Bonjour,

J'utilise ce script pour changer d'image au survol de la souris :

Code html :

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

<div id="logo"><a href="..."><img src="logo.png" id="switch_logo" /></a></div>

Code :

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

1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$("#switch_logo").hover(
   function () {
     $(this).attr('src','logo_b.png');  
   },
   function () {
      $(this).attr('src','logo.png');  
   }
);
});

Est-il possible d'ajouter la fonction fadeIn / fadeOut pour une transition en fondu ?

Merci !!

**Bovino** · 13/11/2014, 10h16

Comme ça, non : un fondu implique deux images et une balise image ne peut avoir qu'un seul src.
En gardant une seule image, tu peux faire un fadeOut, changer le src, faire un fadeIn(). En faisant attention toutefois que la seconde image soit bien chargée.

Sinon, utiliser deux images superposées.

Fondu enchainé.

**gOO69** · 14/11/2014, 14h36

Merci Bovino pour les conseils, et voici la solution retenue qui fonctionne à merveille :

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
<html>
<head>
<title></title>
<style>
span.switch_logo {
        width: 150px;
        height: 148px;
        position: absolute;
        z-index: 10;
        background-image: url(/multimedias/images/logo_b.png);
        background-repeat: no-repeat;
        background-position: center center;
} 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
 
<body>
 
<a href="...">
	<span class="switch_logo"></span>
	<img src="/multimedias/images/logo.png" alt="" width="150" height="148" />
</a>
 
<script>

Code :

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

1
2
3
4
5
6
7
8
9
$(function() {
	$(".switch_logo").css("opacity","0");
		$(".switch_logo").hover(function () {
			$(this).stop().animate({opacity: 1}, "slow");
			},
			function () {
			$(this).stop().animate({opacity: 0}, "slow");
		});
});