Discussion :

[actarus4444]

Bonjour à tous ;-)

J'ai un petit soucis avec un bout de js que je viens de faire.

Le but étant de faire un fade in et fade out lors du passage de la souris sur une image qui change, avec un retour à son état initial lors du "mouseout".

Je sais pas si c'est super claire mais pour le moment avec ceci ça fonctionne, mais si je passe la souris trop rapidement sur l'image l'animation se joue en boucle...

Est-ce possible de ne jouer l'anim. qu'une fois ? Ou est-ce qu'il y a moyen de mettre un stop quelque part.

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
 
<script type="text/javascript">
    $(document).ready(function() {
 
 
 
            $('img.swap').mouseover(function() {
                $(this).blur().animate({ opacity: 0.0 }, {duration:300, complete:function(){this.src = 'img/logo_hov.png';}});
				$(this).blur().animate({ opacity: 1.0 }, {duration:200, complete:function(){this.src = 'img/logo_hov.png';}});
            })
			$('img.swap').mouseout(function() {
                $(this).blur().animate({ opacity: 0.0 }, {duration:300, complete:function(){this.src = 'img/logo.png';}});
				$(this).blur().animate({ opacity: 1.0 }, {duration:200, complete:function(){this.src = 'img/logo.png';}});
            })
 
    });
</script>

Code :

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

1
2
 
<div id="logo"><a href="index.html"><img src="img/logo.png" class="swap"/></a></div>

D'avance merci pour votre aide

[Sourrisseau]

a ta question

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
 
 
<script type="text/javascript">
    $(document).ready(function() {
 
 
		$('img.swap').mouseover(function() {
		    $(this).stop().animate({ opacity: 0.0 }, {	
			    		duration:300, 
			    		complete:function(){
		    					this.src = 'img/logo_hov.png';
		    					$(this).animate({ opacity: 1.0 }, {duration:200});
			    		}
			});
 
		})
		$('img.swap').mouseout(function() {
		    $(this).stop().animate({ opacity: 0.0 }, {
			    			duration:300, 
			    			complete:function(){
								this.src = 'img/logo.png';
		   						$(this).animate({ opacity: 1.0 }, {duration:200});
		    	}
			});
 
		})
 
    })
 
	</script>

J'ai légèrement réécris ton code pour qu'il soit plus lisible et j'ai rajouté .stop() après tes 2 élèvements. .stop() arrête les animations si une est en cours.