I am looking to create a functionality where a div rotates when the mouse enters it and returns to its original position when the mouse leaves. Everything works fine when interacting with one div, but as soon as I try hovering over other divs, it starts glitching.
Here is the JavaScript code:
$(document).ready(function(){
var blocks = document.getElementsByClassName('block-item');
for (var i = 0, max = blocks.length; i < max; i ++) {
blocks[i].onmouseenter = blocks[i].onmouseleave = handler;
}
var startRotate = function(blackFrame, blackFrameAngle) {
// ...
};
var startRotateBack = function(blackFrame, blackFrameAngle) {
// ...
};
function handler(event) {
// If mouse enters start rotating clock-wise
if (event.type == 'mouseenter') {
// Calculate angles
var blackFrame = event.target.querySelectorAll('.block-frame')[0];
var blackFramePos = getComputedStyle(blackFrame).getPropertyValue('transform');
var blackFrameValues = blackFramePos.split('(')[1],
blackFrameValues = blackFrameValues.split(')')[0],
blackFrameValues = blackFrameValues.split(',');
var a = blackFrameValues[0];
var b = blackFrameValues[1];
var radians = Math.atan2(b, a);
if ( radians < 0 ) {
radians += (2 * Math.PI);
}
var blackFrameAngle = Math.round( radians * (180/Math.PI));
// Start rotating
startRotate(blackFrame, blackFrameAngle);
}
// If mouse leaves stop rotating clock-wise and start rotating back
if (event.type == 'mouseleave') {
clearInterval(RotateFrame)
// ...
// ...
// Start rotating back
startRotateBack(blackFrame, blackFrameAngle);
}
}
});
You can find the full code in this jsfiddle http://jsfiddle.net/fw3ma9ej/2/