Größe der Animation von der Mitte auf einem Hover

Question

Ich habe diese Animation, auf dem Hover die Größe auf meiner Spannweite ist größer. Aber ich möchte, dass die Animation von der Mitte der Maus beginnt.

Wie kann ich tun?

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

Um dies zu erreichen Sie nur die margin zusammen mit dem width und height zum Mittelpunkt des Elements animieren müssen, um die Cursor entsprechen. Wenn das Element ausgeblendet ist, sollte der Rand 50% der endgültigen Breite betragen. Wenn die Animation endet, sollte der Rand 0 sein. Versuchen Sie folgendes:

$(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

Eigentlich auch die Position der Spanne animieren. Wenn Sie mit der Animation beginnen, wird die Höhe und Breite von span auf 0 gesetzt, und Sie setzen die Position bereits auf mouseCurrentPosition-50. In diesem Fall beginnt die Animation mit -50 oben und -50 links. Also probier es bitte einmal, vielleicht hilft es dir.

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

Best of luck :)