使用Firefox在悬停时从中心调整动画大小

Question

我有这个动画，在悬停时我的跨度上的大小更大。但我希望动画从鼠标中心开始，它适用于Safari和谷歌Chrome，但不适用于Mozilla Firefox（50.1.0）。

为什么？

https://jsfiddle.net/9rrbzwem/11/

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

Answer 1

您可以使用css transform定位span元素。

＆＃13;

＆＃13;

$(document).mousemove(function(e) {
  $("span").css({
    left: e.pageX,
    top: e.pageY
  });
});

$("div").hover(function() {
  $(this).stop().animate({ opacity: 0.5 }, 0);

}, function() {
  $(this).stop().animate({ opacity: 1 }, 0);

});

＆＃13;

div {
  width: 400px;
  height: 100px;
  background-color: grey;
  position: absolute;
}
div:hover span {
   width: 100px;
   height: 100px;
   -moz-transform-origin: center;
   -webkit-transform-origin: center;
   transform-origin: center;
}
span {
  display: block;
  height: 0px;
  width: 0px;
  position: absolute;
  background: red;
  border-radius: 50px;
  pointer-events: none;
  -moz-transition:  width 2s ease, height 2s ease;
  -moz-transform: translate(-50%, -50%);
  -moz-transform-origin: center;
  
  -webkit-transition:  width 2s ease, height 2s ease;
  -webkit-transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
  
  transition: width 2s ease, height 2s ease;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

＆＃13;

<div><span></span></div>

＆＃13;

＆＃13;

＆＃13;

https://jsfiddle.net/gt73k2ox/