cela ne s'arrêtera-t-il donc jamais ?!

olilas
Javascript

Bonjour à tous !
voilà mon problème sur lequel je bute depuis un moment :
j'ai une image dans une div que je veux faire tourner au survol de la souris, jusque là j'y arrive, et
que l'image s'immobilise quand la souris sort de la div Et c'est là que ça marche pas, elle tourne toujours et
pire l'effet semble se cumuler quand je retourne dans ma div.

Si quelqu'un peut m'aider il aura toute ma gratitude !

Code :
<head>
...
<script type="text/javascript">
$(document).ready(function(){
$("#div_image").mouseenter(function(){
var angle = 0;
setInterval(function(){
angle+=3;
$("#image").rotate(angle);
},50);
}).mouseleave(function() {
$("#image").stop();
});
});
</script>
...
</head>
<body>
<div id="div_image">
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
<img src="image.png" id="image">
</div>

Merci d'avance de vos réponses...

4 réponses

Maenhyr
Réponse acceptée

Salut,
essaye en faisan un clearInterval();

jQuery(function( $ ){
    var interval;
    $("#div_image").mouseenter(function(){
        var angle = 0;
        interval = setInterval(function(){
            angle+=3;
            $("#image").rotate(angle);
        },50);
    }).mouseleave(function() {
        clearInterval(interval);
    });
});

EDIT: par contre, il est préférable de charger ton script juste avant la balise </body> et pas en plein milieu d'une div.

olilas
Auteur

Ca fonctionne c'est magnifique !
Juste un complément d'information : l'image en sorti de div s’arrête comme il faut mais
quand je rentre à nouveau elle repart de sa position initiale...
Une astuce peut-être pour qu'elle reparte de la position où elle s’arrête ?
En tout cas merci beaucoup je tournais en rond depuis un moment...

Ps : le script est rentré dans sa balise <head>, il s'excuse pour sa fugue...

Maenhyr

Il te suffit de sortir l'initialisation de ta variable angle, tout simplement :).

jQuery(function( $ ){
    var interval;
    var angle = 0;
    $("#div_image").mouseenter(function(){
            interval = setInterval(function(){
            angle+=3;
            $("#image").rotate(angle);
        },50);
    }).mouseleave(function() {
        clearInterval(interval);
    });
});
olilas
Auteur

J'ai honte...
En tout cas merci beaucoup cela fonctionne à merveille !