Comment jouer une animation une seule fois ?
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:
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:
1
2
|
<div id="logo"><a href="index.html"><img src="img/logo.png" class="swap"/></a></div> |
D'avance merci pour votre aide :D
