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

【问题标题】：Resize animation from the center on a hover悬停时从中心调整动画大小
【发布时间】：2017-04-27 06:12:21
【问题描述】：

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

我该怎么办？

$(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的可能重复

标签： jquery css jquery-ui animation hover

【解决方案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>

【讨论】：