jQuery FadeIn 在 Mobile Chrome Android 中无法正常工作

Question

首先，这是工作演示： http://desainwebsite.com/marux-demo2

我想要实现的很简单：

当我单击菜单按钮时，菜单正在显示，并且这个半透明的黑色背景淡入。当我点击那个半透明的黑色背景时，菜单关闭并且这个背景淡出。

这是我点击菜单按钮时的代码：

$(".mnav-toggle").click(function(e) {
    $(".black-overlay").fadeIn();
    $(".mobile-nav").animate({"left":0});
    e.preventDefault();
});

这是点击背景的时候

function closeMenu() {
$(".black-overlay").fadeOut();
$(".mobile-nav").animate({"left":"-200px"});
}

$(".black-overlay").click(function(e) {
    closeMenu();
    e.preventDefault();
});

此代码在许多移动浏览器中运行良好，但在移动 Chrome Android 中运行不佳。 错误是： 黑色背景在淡出后不显示。 尝试单击一次菜单按钮，然后关闭菜单（单击背景）。并再次打开菜单（单击菜单）。在 Android Chrome 中，背景是隐藏的，但它仍然存在，因为它仍然可以点击。

iOS 中的 Chrome 没有此错误。 我也尝试过适用于 Android 的 Firefox，而且效果很好。

代码有错误吗？ 请帮帮我。

提前致谢！

编辑： 哦，当我将 fadeIn()/Out() 更改为简单地 hide() 和 show() 时，它正在工作。所以问题肯定出在这个衰落功能上。

编辑2： 我可以将fadeIn() 更改为show() 但保留fadeOut 函数并且它正在工作！ 所以我猜主要的罪魁祸首是fadeIn()函数。

Answer 1

根据我的经验，通过使用 .animate() 而不是 .fadeIn() 或 fadeOut()，我很幸运能够消除错误。您可以尝试为黑色叠加 div 的不透明度设置动画，看看是否可以解决问题。如果将其与 CSS3 过渡结合使用，您可以实现相同的淡入/淡出效果。

function closeMenu() {
$(".black-overlay").animate({opacity: 0});
$(".mobile-nav").animate({"left":"-200px"});
}

$(".black-overlay").click(function(e) {
    closeMenu();
    e.preventDefault();
});

Answer 2

代替.fadeIn() 和.fadeOut() 尝试使用.show() 和.hide() 效果很好。如果动画效果不重要，请使用此选项。