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

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

这部动画在Safari、Google Chrome和Opera上完美地工作

Firefox上的问题似乎只有在中间块试图向下移动时才会出现

以下是我的投资组合的链接：

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

JS:

HTML:

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

为什么不使用animate（）jquery函数

---

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

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

这就是为什么您应该使用去盎司，如果您感兴趣，请参阅本文：

下面的代码片段将确保鼠标进入/离开事件不会每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));

---

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

对我来说，Firefox上的行为似乎是正常的。可能基于Webkit的引擎仅在光标移动时评估“鼠标*”事件

为了回答这个问题，我认为应该将屏幕分为三部分来触发动画

下面是一个简单的片段来演示这一点：

$（文档）.ready（函数（）{
$（'.animated'）.mouseenter（函数（）{
$（this.addClass（'slided'）；
});
$（'.animated'）.mouseleave（函数（）{
$（this.removeClass（'slided'）；
});
});
.container{
位置：相对位置；
背景色：柠檬色；
最小高度：100px；
}
.动画{
位置：绝对位置；
背景色：红色；
排名：0；
左：0；
高度：50px；
宽度：100px；
过渡：所有.3s易于输入输出；
}
.动画{
背景颜色：蓝色；
顶部：50px；
左：200px；
}

旁注：传递对象并调用
.css（）
方法一次，即
$（'slateEnd'）.css（{'top'：'17vh'，'left'：'56vw'）好酷，我发现我的方式更容易阅读-因为它变得相当混乱。谢谢你的提示，非常感谢。我同意satpal的说法，那样做会更好，但是如果你想让它保持在单独的函数中，你也可以做
$（'#slate'）.css（'height'，'20vh'）.css（'top'，'45vh'）.css（'left'，'24vw'）这将为您节省大量jquery对象，并且更易于以后编辑。当然，如果您愿意的话，这些函数都可以放在一个新行上。我对jquerytbh非常陌生。我真的需要完成这些课程。不过我听说过这个功能。这提供了一些重要的信息，但问题仍然存在于Firefox上。
    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));