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

【问题标题】：Resize animation from the center on a hover with Firefox使用 Firefox 悬停时从中心调整动画大小
【发布时间】：2017-05-11 02:03:36
【问题描述】：

我有这个动画，悬停时我的跨度尺寸更大。但我希望动画从鼠标中心开始，它适用于 Safari 和 Google 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);
});

【问题讨论】：

我把它放在一个本地文件中，它就像在 Chrome/Safari 中一样工作（我在 Mac 上）。但是当它是一个 jsFiddle 时，你描述的问题就会发生。我也试过codepen，上面提到的三个浏览器都没有问题。 codepen.io/alexwc_/pen/QGXwda
好的，问题是我的 Jquery 太旧 (1.7.0)，我放了最新版本 (3.1.0) 并且知道它可以在 Mozilla Firefox 上运行。

标签： javascript jquery html css firefox

【解决方案1】：

您可以使用 css 转换来定位 span 元素。

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

});

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

&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;

https://jsfiddle.net/gt73k2ox/

【讨论】：