jQuery動畫鼠標事件

我正在創建一個示例應用程序，我需要在用戶將光標移離光標後儘快更改div的顏色。jQuery動畫鼠標事件

它工作但準確，不知道我哪裏出錯了。

請參閱下面的示例應用程序。

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

來源

2017-09-21 Manish Parab

什麼不準確？ –

請檢查JS小提琴...重疊是不正確的......即使鼠標在塊外顏色是紅色的...這不應該是案件 –

所以你想當鼠標不在div中顏色必須是黃色的，如果它的內部div顏色必須是紅色的。那是你的意思嗎？ –

在代碼中使用。ABS（）鼠標事件也燒成當鼠標-100px到div的左邊或頂部。

你也可以使用的mouseenter（）來實現這一點，

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

來源

2017-09-21 04:01:25 SLL

使用 '的mouseenter' 和 '鼠標移開' 的事件，它將幫助。

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

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

來源

2017-09-21 06:08:14 Niks

jQuery動畫鼠標事件

回答

相關問題