I am currently working on an animation where the size of my span element increases upon hover. However, I am facing an issue with Mozilla Firefox (50.1.0) as the animation does not begin from the center of the mouse cursor like it does in Safari and Google Chrome.
Why is this happening?
https://jsfiddle.net/9rrbzwem/11/
$(document).mousemove(function(e) {
$("span").css({
left: e.pageX - 50,
top: e.pageY - 50
});
});
$("div").hover(function() {
$(this).stop().animate({ opacity: 0.5 }, 0);
$("span").stop().animate({
height: 100,
width: 100,
margin: 0 // changed
}, 200);
}, function() {
$(this).stop().animate({ opacity: 1 }, 0);
$("span").stop().animate({
height: 0,
width: 0,
margin: 50 // changed
}, 200);
});