在悬停时从中心调整动画大小

Question

我有这个动画，在悬停时，我的跨度上的大小更大。 但我希望动画从鼠标中心开始。

我该怎么做？

https://jsfiddle.net/telman/9rrbzwem/

$(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": "100px", "width": "100px"}, 200);
},
function() {
$(this).stop().animate({"opacity": "1"}, 0);
$("span").stop().animate({"height": "0px", "width": "0px"}, 200);
}
); 

Answer 1

要实现此目的，您只需要将margin与width和height一起动画化，以使元素的中心点与光标匹配。当元素隐藏时，边距应为最终宽度的 50%，当动画结束时，边距应0。试试这个：

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

div {
width: 400px;
height: 100px;
background-color: grey;
position: absolute;
margin: 100px;
}
span {
display: block;
height: 0px;
width: 0px;
position: absolute;
background: red;
border-radius: 50px;
pointer-events: none;
margin: 50px; /* changed */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<span></span>

Answer 2

实际上，您还必须对跨度的位置进行动画处理。当您开始制作动画时，范围的高度和宽度设置为 0，并且您已将位置设置为 mouseCurrentPosition-50。因此，在这种情况下，动画从顶部的 -50 和左侧的 -50 开始。所以请尝试一次，也许对您有所帮助。

$(document).mousemove(function(e){
$("span").css({left:e.pageX-50 , top:e.pageY -50});
});

$("div").hover(
function(e) {
$("span").css({left:e.pageX , top:e.pageY });
$(this).stop().animate({"opacity": "0.5"}, 0);
$("span").stop().animate({
"height": "100px",
"width": "100px",
"left":e.pageX-50 ,
"top":e.pageY-50
}, 200);
},
function(e) {
$(this).stop().animate({"opacity": "1"}, 0);
$("span").stop().animate({"height": "0px",
"width": "0px",
"left":e.pageX ,
"top":e.pageY
}, 200);
}
); 

祝你好运:)