jQuery: Farenin bir animasyonun üzerinde olup olmadığını kontrol edin.

Question

Bu hemen hemen üzerinde çalıştığım budur: div üzerinde gezdirin ve ne zaman sonra konsoluna giriş, sola hareket etmek https://jsfiddle.net/atg5m6ym/2625/

jQuery ile bir div animasyon ediyorum ondan uzakta benim fareyi hareket ettirdiğinizde : Ben elemanı benim fare koymak kez

$("div").animate({left: '250px'}, 6000); 

$('div').hover(function() { 
    console.log("Mouse hovered on div!"); 
}).mouseleave(function() { 
     console.log("Mouse left div!"); 
}) 

Doğal olarak, program, console.log("Mouse hovered on div!"); çalışacaktır.

Ancak, faremi boşta bırakırsam ve animasyonlu öğe üzerine taşınırsa, $('div').hover(function(){})'da hiçbir şey çalışmaz. Çalıştırılacak kodun üzerine fareyi hareket ettirmeliyim, elemanın fareye gelmesine izin vermemeliyim.

Aynı şey, öğenin üzerine geldiğimde de olur ve faremi boşta bırakır. $('div').mouseleave(function(){}) öğesindeki hiçbir şey, fareyi konumdan taşıyana kadar, öğe bırakıldıktan sonra çalışmayacaktır.

Bu konu üzerinde çalışmanın bir yolu var mı? Animasyonlu div'larla çalışıyorum ve farenin boşta ve div'ler içinden geçse bile koşmak için kodlara ihtiyacım var.

Answer 1

Farenin son bilinen konumunu elle alın ve dairenin konumuna karşılaştırın. Bu çok kapsamlı ama doğru sonuçları almalı. İşte

bir JSFiddle geçerli: 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); 
}); 

ben "foo" için kolaylık div kimliğini değiştirdi. Kodun projeniz için çalışmasını sağlayın ya da JS'yi "foo" kullanmamak için değiştirin.

Açıklama:

senin sorunun Farenizin coords sadece her zaman size imleci güncellenir ve vurgulu devletler .hover tarafından kontrol edilir saatler olduğu için oldu oluşmasını edilmesinin nedeni. Bu nedenle, imleci hareketsiz durumunun güncellendiğinden emin olmak için hareket etmemiş olsa bile, imleci belirleyen olayı taklit etmeli ve tekrar tekrar çağırmalıyız.