Javascript CSS转换闪烁替换背景图像和反转文本

如果这是一个简单的问题，我提前表示歉意，但我是一个新手，在解决鼠标悬停触发CSS转换时出现的问题时遇到了极大的困难

我正在使用JS根据鼠标在屏幕上的位置触发颜色和背景图像的反转。如果用户将鼠标移动到屏幕底部50%，JS会将类“white”添加到标记中

这将更改页面上所有文本的颜色，并加载不同的背景图像

我认为我面临两个问题：

初始页面加载后，转换闪烁一次。我相信这可能是因为图像没有预加载。我不知道在我目前的情况下，我怎么能轻松做到这一点

当在屏幕的下半部分和上半部分之间快速移动时，我注意到了相同类型的闪烁行为。但是，当我允许转换完成时，我可以在两种状态之间平滑地移动，而不会闪烁。我无法理解是什么导致了这种不一致的行为

|

#家{
背景色：#191919；
背景：url（../img/Profile1.jpg）没有固定的重复中心；
背景尺寸：封面；
过渡：所有900ms立方贝塞尔（0.455,0.03,0.515,0.955）；
}
#怀特先生{
背景色：白色；
背景：url（../img/Profile2.jpg）无重复中心固定；
背景尺寸：封面；
}
用户界面/用户体验设计师，致力于创造周到的数字体验。
渴望寻找新视角和有意义联系的旅行者。
winWidth=$（窗口）.width（）；
如果（winWidth>=752）{
$（'.invert触发器'）.hover（函数（）{
$（'body'）.addClass（'white'）；
}，函数（）{
$（'body'）.removeClass（'white'）；
});
$（'.invert触发器'）.hover（函数（）{
$（'.invert'）.addClass（'black'）；
}，函数（）{
$（'.invert'）.removeClass（'black'）；
});
}         
});

感谢您为解决这些挑战提供的任何帮助

“快速”在这种情况下是指在转换完成之前移动鼠标。 有很多方法可以解决这个问题

一个示例是切换指示动画是否准备就绪的参数。然后，可以在启动动画时将参数切换为

ready=false

，并使用

setTimeout（）

将其切换回。这样，动画将始终在您再次触发之前完成。

在这种情况下，“快速”是指在转换完成之前移动鼠标。 有很多方法可以解决这个问题

---

一个示例是切换指示动画是否准备就绪的参数。然后，可以在启动动画时将参数切换为

ready=false

，并使用

setTimeout（）

将其切换回。这样，动画总是在你再次触发之前完成。

我倾向于在你的身体标签上使用一个

：before

伪元素，可选颜色和背景图像已经应用到它，不透明度为零，并在你的悬停处理程序中切换不透明度。它将隐藏在其他内容后面。然后图像将在初始转换之前加载（希望取决于大小和网络速度）

我倾向于在body标签上使用

：before

伪元素，该元素已经应用了可选颜色和背景图像，不透明度为零，并在悬停处理程序中切换不透明度。它将隐藏在其他内容后面。然后图像将在初始转换之前加载（希望取决于大小和网络速度）

我对你的脚本做了一点修改。我希望你仍能读懂

$(document).ready(function() {
    if($(window).width() >= 752) {
        $('.invert-trigger').on('mouseover', function() { // One .mouseover() event
            $('body').addClass('white');
            $('.invert').addClass('black');
        }).on('mouseout', function() {  // One .mouseout() event
            $('body').removeClass('white');
            $('.invert').removeClass('black');
        });
    }
});

图像的闪烁是由于图像尚未加载到DOM中。 这可以通过预加载图像来解决

var img = new Image();
img.src = 'your_image_url.jpg';

---

我希望这对您有所帮助。

我对您的脚本做了一些更改。我希望你仍能读懂

$(document).ready(function() {
    if($(window).width() >= 752) {
        $('.invert-trigger').on('mouseover', function() { // One .mouseover() event
            $('body').addClass('white');
            $('.invert').addClass('black');
        }).on('mouseout', function() {  // One .mouseout() event
            $('body').removeClass('white');
            $('.invert').removeClass('black');
        });
    }
});

图像的闪烁是由于图像尚未加载到DOM中。 这可以通过预加载图像来解决

var img = new Image();
img.src = 'your_image_url.jpg';

---

我希望这对您有所帮助。

查看此线程了解更多信息：我对jquery非常陌生，但会仔细查看您重新编写的代码，并按照您的建议找出如何将图像加载到DOM中。查看此线程了解更多信息：我对jquery非常陌生，但是，我会仔细查看您重新编写的代码，并按照您的建议找出如何将图像加载到DOM中。谢谢，我对此并不熟悉，但我很乐意学习，并很乐意在今晚回家后制作一个演示。谢谢你的帮助！我有机会浏览代码，并根据请求将相关内容拉入JSFIDLE。我以前没有使用过这个服务，似乎无法运行实际的js（可能是一些简单的错误）。谢谢你在这方面提供的任何帮助。。这个链接可以在这里查看：似乎工作正常。谢谢我会尽量找时间的。谢谢，我对这个不太熟悉，但我很想学习，今晚回家后很乐意制作一个演示。谢谢你的帮助！我有机会浏览代码，并根据请求将相关内容拉入JSFIDLE。我以前没有使用过这个服务，似乎无法运行实际的js（可能是一些简单的错误）。谢谢你在这方面提供的任何帮助。。这个链接可以在这里查看：似乎工作正常。谢谢我会尽量找些时间。这是有道理的，但我想这也会让页面感觉很慢，因为它需要在回滚到前一个状态之前完成整个转换。理想情况下，如果我通过了50%的过渡，我会