jQueryのアニメーションのマウスイベント

Question

私はdivの色を変更する必要があるサンプルアプリケーションを作成しています。

正しく動作していますが、どこが間違っているのかわかりません。

下のサンプルアプリケーションを参照してください。あなたのコードで

http://jsfiddle.net/manishparab/3q1trzwk/

var cursorX = 0; 
var cursorY = 0; 

$(document).ready(function() { 
    $(".a").mouseover(function() { 
     animateDiv(); 
     setInterval(function() { 
      isCursorOnSquare('.a') 
     }, 1); 
    }); 
}); 

$(document).on('mousemove', function(e) { 
    cursorX = e.pageX; 
    cursorY = e.pageY; 
}); 

function isCursorOnSquare(elem) { 
    var pos, width, height; 
    pos = $(elem).position(); 
    if ((Math.abs(pos.left - cursorX) <= 100 && Math.abs(pos.top - cursorY) <= 100)) { 
     $(elem).css("background-color", "red"); 
    } else { 
     $(elem).css("background-color", "yellow"); 
    } 
} 

function makeNewPosition() { 
    var h = $(window).height() - 50; 
    var w = $(window).width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh, nw];  
} 

function animateDiv() { 
    var newq = makeNewPosition(); 
    var speed = 2000; 
    $('.a').animate({ top: newq[0], left: newq[1] }, speed, function() { 
     animateDiv();   
    }); 
} 

Answer 1

.ABSを使用して（）マウスは、div要素の左または上に-100pxあるときにマウスイベントも発火しています。

ます。また、これを実現するためのMouseEnter（）を使用することができ

$("div").mouseenter(function(){ 
    $("div").css("background-color", "red"); 
}).mouseleave(function(){ 
$("div").css("background-color", "yellow"); 
}); 

Answer 2

使用 'のMouseEnter' とそれが役立つ 'マウスアウト' イベント。

$('#divID').on('mouseenter', function() { 
    //your code 
}); 

$('#divID').on('mouseout', function() { 
    //your code 
});