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

Question

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

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

Firefox 的问题似乎只是在中间块尝试向下移动时

这是我的作品集的链接：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

您的动画将中间元素移出屏幕，这意味着您的动画会自动调用“mouseleave”回调。

对我来说，Firefox 上的行为似乎是正常的。也许基于 Webkit 的引擎只在光标移动时评估 "mouse*" 事件。

回答，我认为你应该把屏幕分成三个部分来触发动画。

这里有一个简单的 sn-p 来演示：

$(document).ready( function () {
  $('.animated').mouseenter(function () {
    $(this).addClass('slided');
  });
  
  $('.animated').mouseleave(function () {
    $(this).removeClass('slided');
  });
});

.container {
  position: relative;
  background-color: lemonchiffon;
  min-height: 100px;
}

.animated {
  position: absolute;
  background-color: red;
  top: 0;
  left: 0;
  height: 50px;
  width: 100px;
  transition: all .3s ease-in-out;
}

.animated.slided {
  background-color: blue;
  top: 50px;
  left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="animated"></div>
</div>

Answer 2

我不确定我是否理解你的问题，但我认为这是你的问题。

中间石板表现得非常不稳定，因为进入和离开事件经常被触发。这使动画看起来很奇怪和不稳定，但设备也需要很多时间来处理它。

这就是为什么你应该使用去抖动，如果你有兴趣，可以在这篇文章中详细了解：debounce

下面的代码 sn-p 将确保您的鼠标进入/离开事件不会每 50 毫秒触发一次以上

    function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
$('#slateMid').on('mouseleave', debounce(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');
    },50));

$('#slateMid').on('mouseenter', debounce(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');
    },50));

Answer 3

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

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