JQuery FadeIn not working properly in Mobile Chrome Android

Question

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

What I want to achieve is pretty simple:

When I press the menu button, the menu is displayed, and this semi-iridescent black background is fadeIn. And when I click this half-intersecting black background, the menu closes and this background disappears.

This is my code when pressing the menu button:

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

And this is when the background is clicked

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

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

This code works well in many mobile browsers, but not in mobile Chrome Android. Error: The black background does not appear AFTER it disappears. Try pressing the menu button once, then close the menu (click the background). and open the menu again (click the menu). In Android Chrome, the background remains hidden, but it exists because it is still clickable.

Chrome iOS . Firefox Android, .

? , .

!

EDIT: oh fadeIn()/Out(), () (), . .

EDIT2: fadeIn(), (), 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(), . , .