First of all, this is the working demo:
<http://desainwebsite.com/marux-demo2>

What I want to achieve is pretty simple:

When I click menu button, the menu is showing, and this semi-transluscent black background fadeIn. And when I click that semi-transluscent black background, menu closed and this background fade out.

This is my code when the menu button is clicked:

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

```

And this is when the background clicked

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

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

```

This code is working well in many mobile browsers, but not in mobile Chrome Android.
The bug is:
The black background is not showing AFTER it fade out.
Try click the menu button once, then close the menu (click the background). and open the menu again (click the menu). In Android Chrome, the background stay hidden, but it is there since it's still clickable.

Chrome in iOS doesnt have this error.
And I've tried Firefox for Android as well and it's working.

Is there any error in the code?
Please help me.

Thanks in advance!

EDIT:
oh and when I change the fadeIn()/Out() to simply hide() and show(), it's working. So the problem must be about this fading function.

EDIT2:
I can change fadeIn() to show() but keep the fadeOut function and it's working!
So the main culprit is in fadeIn() function I guess.