jQuery et l'exécution du code jusqu'à ce que le mouseout soit appelé

Question

Bonjour, je suis chargé de construire un curseur pour notre site. Voici mon objectif:

<div id="abc"> 
    <div id="slider">...</div> 
</div> 

je dois déplacer « curseur » gauche 30px à un moment où un bouton est plané au-dessus et à droite 30px lorsqu'un autre bouton planait au-dessus. Mon problème est qu'il ne semble pas y avoir une méthode fiable pour dire au code que la souris n'a pas quitté le sont en question, à moins qu'il y ait quelque chose que je n'ai pas encore pensé ou lu. En d'autres termes, lorsque la souris est sur le bouton a, le code à déplacer "curseur" à gauche est exécuté jusqu'à ce que le mouseout soit appelé. Je ne suis pas vraiment sûr de savoir comment faire ça.

La seule façon que je peux penser est à regarder le offsetTop et les propriétés offsetLeft et offsetTop DOM et de les comparer à la position de la souris, que de courir vérifie si la souris est dans les limites de la boîte, et sinon, cela arrêtera l'exécution du code.

Y a-t-il une meilleure façon de procéder?

Answer 1

C'est assez facile.

var timerID; 
$("#left").hover(function() { 
    timerID = setInterval(slideLeft, 1000); 
}, function() { 
    clearInterval(timerID); 
}); 

function slideLeft() { 
    $("#slider").animate({left: -30}); 
} 

et similaire pour droite.

Vous avez seulement besoin d'utiliser hover() s'il y a quelque chose que vous devez arrêter lorsque la souris quitte la zone. Sinon, vous pouvez simplement utiliser l'événement mouseover().

Remarque: l'effet réel que j'ai mis là n'est probablement pas correct, mais cela dépend entièrement du plugin curseur que vous utilisez. Ajuster au besoin.

Answer 2

Vous n'avez pas besoin de vérifier où se trouve la souris, car l'événement mouseout sera déclenché lorsque la souris quitte l'élément.

Pour faire la répétition de mouvement alors que la souris est en vol stationnaire l'élément, commencer un intervalle que vous arrêtez lorsque la souris quitte l'élément:

$(function(){ 

    var moveInterval; 

    $('#moveLeft').hover(function(){ 
    moveInterval = window.setInterval(function(){ 
     // here you move the slider 
    }, 100); 
    }, function(){ 
    window.clearInterval(moveInterval); 
    }); 

});