jQuery：マウスがアニメーション上にあるかどうかを確認しますか？

Question

はこれはかなり私が働いているものです：私がdiv要素の上に置いて、ときに、コンソールにログインし、左に移動するhttps://jsfiddle.net/atg5m6ym/2625/

私はjQueryを使ってdiv要素をアニメーション化しています私はそれから離れて私のマウスを移動すると、 ：

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

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

当然、要素にマウスを置くと、プログラムはconsole.log("Mouse hovered on div!");になります。

しかし、マウスをアイドルのままにして、アニメーション要素がその上に移動すると、$('div').hover(function(){})の何も実行されません。私は、コードを実行するために要素にマウスを移動しなければなりません、要素がマウスに来るようにしないでください。

要素にマウスを置いてマウスをアイドル状態にしておくと、同じことが起こります。 $('div').mouseleave(function(){})の要素は、マウスがその位置から移動するまで、要素の葉の後には実行されません。

これを回避する方法はありますか？アニメーション化されたdivで作業しています。マウスがアイドル状態で、divが通過しても実行するコードが必要です。

Answer 1

手動でマウスの最後の既知の位置を取って、それを円の位置と比較します。これは多種多様ですが、適切な結果を得ることができます。ここで

が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); 
}); 

私は便宜上 "FOO" にdiv要素のIDを変更しました。プロジェクトでコードが機能するようにするか、 "foo"を使わないようにJSを変更してください。

説明：

マウスのcoordsのが唯一のあなたのカーソルを移動するたびに更新されているので、あなたの問題が発生した理由があって、ホバー状態は.hoverによって確認されているときです。そのため、カーソルを移動していなくても、ホバーを決定するイベントをエミュレートし、ホバー状態が更新されていることを確認する必要があります。