arreter une animation qui tourne en boucle au passage de la souris

José Amani
Javascript

Salut a tous voila, j'ai une animation qui fais clignoter mon bouton j'aimerai qu'au passage de la souris l'animation s'arrete mais je ne sais pas trop comment m'y prendre
un coup de main please...........

mon code

<!-- le bouton -->
<span class="bttn sr" style="position:absolute; z-index:10; right:10%; bottom:75%;"><a href="#" class="btn btn-d p1">

<!-- l'animation en boucle -->
<script>
$(function(){
setInterval(function(){ 
   $(".sr").fadeOut(600).delay(300).fadeIn(500); 
}
,1200);

});
</script>

7 réponses

Vallyan
Réponse acceptée

Je ferai un truc ans cet esprit la. Il y a sans doute plus classe, mais je suis un peu rouillé du jQuery. 

$(function(){
    var checkMouse = true;
    $(".sr").mouseenter(function(){checkMouse = false});
    $(".sr").mouseleave(function(){checkMouse = true});
    setInterval(function(){ 
         if(checkMouse){
            $(".sr").fadeOut(600).delay(300).fadeIn(500);
         }
    },1200);
});
Couss
Réponse acceptée

C'est normal il faut re définir ton setInterval lorsque tu qui le bouton

kewai

Tu définis un id dans ton span et définir une variable à ton setInterval

$('#id').hover(function(){
    clearInterval(VAR_setInterval);
},

Quelque chose comme ca à placer devant ta fonction setInterval
En gros tant que tu auras ton curseur au dessus de la div, tu va remettre ton interval à 0.

Couss

Cela ne peut pas être fait en css via les keyframes qui serai moins gourmant ?

José Amani
Auteur

kewai je teste et je te fais un retour

José Amani
Auteur

kewai ca marche mais une fois la souris quitte le bouton l'animation ne redemarre plus -_-

José Amani
Auteur

Merci ca marche desole de vous avoir deranger