JQuery '.css' 在 Firefox 上无法正常运行 - 在 Google Chrome 上完美运行

Question

我的作品集主页上有一种抽象艺术作品，它会根据鼠标光标的位置而移动。

该动画在 Safari、Google Chrome 和 Opera 上完美运行。

Firefox 上的问题似乎仅在中间 block 尝试向下移动时出现

这是我的投资组合的链接:http://benjaminthomasgibbs.co.uk/

好吧，我知道我的 css 代码格式不正确，我喜欢这种方式 - 这可能是问题所在:

JS:

// MIDDLE SLATE ANIMATION 


$(document).ready(function() {
    $('#slateMid').mouseenter(function() {
        $('#slateMid').css('top', '160vh');
       // LEFT SLATE
        $('#slate').css('height', '20vh');
        $('#slate').css('top', '45vh');
        $('#slate').css('left', '24vw');
        $('#slate').css('width', '46.5vw')
        $('#slate').css('box-shadow', '0px 0px 0px');
        $('#slate').css('background-color', '#FEBD45');
        // RIGHT SLATE
        $('#slateEnd').css('height', '23.5vh');
        $('#slateEnd').css('top', '19vh');
        $('#slateEnd').css('left', '24vw');
        $('#slateEnd').css('width', '46.5vw');
        $('#slateEnd').css('box-shadow', '0px 0px 0px');
        $('#slateEnd').css('background-color', '#DF4655');
    })
    $('#slateMid').mouseleave(function() {
        $('#slateMid').css('height', '68.5vh');
        $('#slateMid').css('top', '11vh');
        $('#slateMid').css('box-shadow', '10px 10px 10px #888888');
        $('#slateMid').css('border-left', '4px solid #000');
         $('#slateMid').css('border-right', '4px solid #000');
        // LEFT SLATE
        $('#slate').css('height', '34.5vh');
        $('#slate').css('top', '34vh');
        $('#slate').css('left', '26vw');
        $('#slate').css('width', '14vw');
        $('#slate').css('box-shadow', '10px 10px 10px #888888');
        $('#slate').css('background-color', '#DF4655');
        // RIGHT SLATE
        $('#slateEnd').css('height', '45.5vh');
        $('#slateEnd').css('top', '17vh');
        $('#slateEnd').css('left', '56vw');
        $('#slateEnd').css('width', '14vw');
        $('#slateEnd').css('box-shadow', '5px 5px 5px #888888');
        $('#slateEnd').css('background-color', '#FEBD45');
        $('#slateEnd').css('border-left', '4px solid #000');
    })
})

HTML:

<div id="changeBottomLeft">
</div>
<div id="changeBottomRight">
</div>
<div id="slate">
</div>
<div id="slateMid">
</div>
<div id="slateEnd">
</div>

Answer 1

为什么不使用 animate() jquery 函数？

https://www.w3schools.com/jquery/eff_animate.asp