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

首先，这是工作演示： 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（）时，它正在工作。 所以问题必须是关于这种衰落的function。

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()尝试使用效果良好的.fadeIn()和.fadeOut() 。 如果动画效果不重要，请使用此选项。