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

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>