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 for Firefox，它正在运行。

代码中是否有错误？请帮帮我。

提前致谢！

编辑：哦，当我将fadeIn（）/ Out（）改为简单地隐藏（）和show（）时，它正在工作。所以问题必须是关于这种衰落的功能。

EDIT2：我可以将fadeIn（）更改为show（）但保留fadeOut函数并且它正在工作！所以主要的罪魁祸首是fadeIn（）函数我想。

Answer 1

根据我的经验，我通过使用.animate（）而不是.fadeIn（）或fadeOut（）来消除错误。您可以尝试动画黑色叠加div的不透明度，看看是否能解决问题。如果将它与CSS3过渡相结合，则可以实现相同的fadeIn / fadeOut效果。

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()。如果动画效果不重要，请使用此选项。

jQuery FadeIn在移动Chrome Android中无法正常运行

2 个答案: