Ajouter fadeIn /fadeOut au changement d'image par mouseover

Version imprimable

13/11/2014, 10h08
gOO69

Ajouter fadeIn /fadeOut au changement d'image par mouseover
Bonjour,

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

Code:

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

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 !!
13/11/2014, 10h16
Bovino

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.
:arrow: Fondu enchainé.

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

Code:

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:

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");
		});
});

Code:

1
2
3
</script>
</body>
</html>

@+ dans l'bus