Question

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

我该怎么做？

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

Answer 2

实际上你还必须为跨度的位置设置动画。当您开始设置动画时，span的高度和宽度设置为0，并且您已将位置设置为mouseCurrentPosition-50。所以在这种情况下，动画从-50 top和-50 left开始。所以，请尝试一次，可能会帮助你。

$(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 个答案: