JQuery: Vérifiez si la souris est sur une animation?

C'est à peu près ce que je travaille: https://jsfiddle.net/atg5m6ym/2625/

Je suis en train d'animer un div avec jQuery pour déplacer vers la gauche, puis je me connecte à la console lorsque je roule sur le div et lorsque je déplace la souris loin de là:

$("div").animate({left: '250px'}, 6000); $('div').hover(function() { console.log("Mouse hovered on div!"); }).mouseleave(function() { console.log("Mouse left div!"); })

Naturellement, le programme exécutera console.log("Mouse hovered on div!"); Une fois que j'ai mis ma souris sur l'élément.

Cependant, si je laisse la souris inactive et que l'élément animé se déplace sur elle, rien en $('div').hover(function(){}) s'exécute. Je dois déplacer ma souris sur l'élément pour le code à exécuter, ne pas laisser l'élément venir à la souris.

La même chose se produit si je passe sur l'élément, puis laisse ma souris au ralenti. Rien en $('div').mouseleave(function(){}) s'exécute après l' $('div').mouseleave(function(){}) l'élément, jusqu'à ce que je déplace ma souris de sa position.

Existe-t-il un moyen de contourner cela? Je travaille avec des divs animés et j'ai besoin de code pour fonctionner, même si la souris est au ralenti et que les divs la traversent.

Prenez manuellement la dernière position connue de la souris et comparez-la à la position du cercle. Ceci est généreux, mais il devrait vous donner les bons résultats.

Voici un JSFiddle: https://jsfiddle.net/3vpaoj59/

 $("div").animate({left: '250px'}, 6000); $(document).ready(function() { // record down the position of the cursor var cursorX; var cursorY; document.onmousemove = function(e){ cursorX = e.pageX; cursorY = e.pageY; } // boolean to know if hovered or not, and to know whether to report in console.log var hover = false; // function to call by setinterval to check if mouse is within radius function checkMouse(){ // find the centerpoint of the circle by taking its position then adding half its width/height to each coordinate var left = $("#foo").offset().left+$("#foo").width()/2; var top = $("#foo").offset().top+$("#foo").height()/2; // use pythagorean theorem to find distance between two points var xdist = Math.pow(Math.abs(cursorX - left),2); var ydist = Math.pow(Math.abs(cursorY - top),2); var hypotenuse = Math.round(Math.sqrt(xdist+ydist)); // check if the distance is less than radius if(hypotenuse <= $("#foo").width()/2 && !hover){ // if true and not already reported true, report then fix console.log("mouse hovered on div!"); hover = true; } else if (hypotenuse > $("#foo").width()/2 && hover){ // if false and not already reported false, report then fix console.log("mouse left div!"); hover = false; } } // repeatedly call this setInterval(checkMouse, 100); });

J'ai changé l'ID de div pour "foo" pour plus de commodité. Assurez-vous de faire cela aussi pour que le code fonctionne pour votre projet ou modifiez le JS pour ne pas utiliser "foo".

Explication:

La raison pour laquelle votre problème se produisait parce que les coords de votre souris ne sont mis à jour que chaque fois que vous déplacez votre curseur, et c'est alors que les états de .hover sont vérifiés par .hover . En tant que tel, nous devons imiter l'événement qui détermine le vol stationnement et l'appeler à plusieurs reprises, même lorsque le curseur n'a pas bougé pour s'assurer que l'état du vol stationnaire est mis à jour.