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

Posted 2023-03-06

【中文标题】悬停时从中心调整动画大小

【英文标题】：Resize animation from the center on a hover

【发布时间】：2017-04-27 06:12:21

【问题描述】：

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

我该怎么办？

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);
  
); 

【问题讨论】：

您的div 根本不会改变大小。你的意思是红色的span？

是的，这是跨度

Expand div from the middle instead of just top and left using CSS的可能重复

【参考方案1】：

实际上，您还必须为跨度的位置设置动画。当您开始制作动画时，跨度的高度和宽度设置为 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);
  
); 

祝你好运:)

【参考方案2】：

要实现这一点，您只需为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>