使用Firefox懸停調整中心動畫的尺寸

我有這個動畫，並且在懸停時，我的跨度上的尺寸更大。但我希望動畫從鼠標中心開始，它適用於Safari和Google Chrome，但不適用於Mozilla Firefox（50.1.0）。使用Firefox懸停調整中心動畫的尺寸

爲什麼？

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

來源

2016-12-26 user3870112

我把這個在本地文件和它的工作就像在Chrome/Safari瀏覽器（我在Mac上）。但是當它是一個jsFiddle時，你描述的問題就會發生。我也試過了一個codepen，上面提到的三個瀏覽器沒有問題。 http://codepen.io/alexwc_/pen/QGXwda –

好吧，我的Jquery的問題太老了（1.7.0），我把最新的版本（3.1.0），並知道它在Mozilla Firefox的作品。 – user3870112

您可以使用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; 
 
}

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

https://jsfiddle.net/gt73k2ox/

來源

2016-12-26 17:29:43 Ruddch

使用Firefox懸停調整中心動畫的尺寸

回答

相關問題