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()时,它正在工作.所以问题必须是关于这种衰落的功能.

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

解决方法

根据我的经验,我通过使用.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();
});