0

想知道这个 jQuery 脚本可以/应该如何更新以符合 jQuery v.3+？这个脚本从我们的主要内容包装器中添加和删除一个类，我们使用 CSS opacity & transition 在页面加载和转换时创建优雅的淡出和淡入。

已经工作了很多年，但是 WordPress 将 jQuery 从 1.12.x 更新到了 3.5.x，现在它完全随机地不会删除 Firefox 中的加载类（其他浏览器似乎并不困难）。我无法弄清楚它何时会发生的模式，它只是随机的并且在不同的页面上。这会使页面内容不可见（不透明度：0 = 不理想）。

我们得到的错误是：“发生加载事件后调用 jQuery(window).on('load'...)”...

jQuery( document ).ready(function( $ ) {
// All of our other functions... 

 // Remove .fade-out class from content wrapper after page loads
 $(window).on('load', function () {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("pageshow", function() {
    $("#content-wrap").removeClass("fade-out");
}, false);


// Add .fade-out class to content before page unloads
window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

});

=================

这是我根据最初的评论进行修复的尝试（希望这是呈现这个的正确方法）：

(function( $ ) {
// Remove .fade-out class from content wrap after page loads
 $(window).on("load", function () {
    $("#content-wrap").removeClass("fade-out");
});  

window.addEventListener("pageshow", function() {
    $("#content-wrap").removeClass("fade-out");
}, false);
}( jQuery ));

jQuery( document ).ready(function( $ ) {
// All of our other functions... 

// Add .fade-out class to content before page unloads
window.addEventListener("beforeunload", function () {
  $("#content-wrap").addClass("fade-out");
});

});

关于修复的其他问题：

  • 这是正确的语法吗（抱歉，还不是 JS 专家）？

  • 此解决方案是否存在在页面内容（例如图像）完成加载之前删除 .fade-out 的可能性？让页面淡入然后弹出其他图像有点不太优雅。

  • 是否有任何已知原因导致原始代码在 jQuery 1.x 上运行良好但在 jQuery 3.x 上偶尔会失败？并且只在 Firefox 上失败？？

4

0 回答 0