ホバリングの中心からアニメーションのサイズを変更します

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

これを達成するために、あなただけの要素の中心点は、カーソルを一致させるためにwidthとheightとともにmarginをアニメーション化する必要があります。要素が隠されている場合、マージンは最終幅の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

：これを試してみてください。アニメーションを開始するときに、spanの高さと幅が0に設定されていて、既にpositionを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); 
    } 
); 

運のベスト:)