jQuery FadeIn not working properly in Mobile Chrome Android

问题

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.

回答1:

In my experience, I've had good luck eliminating bugs by using .animate() instead of .fadeIn() or fadeOut(). You could try animating the opacity of the black-overlay div and see if that solves the issue. If you combine this with CSS3 transitions you can achieve the same fadeIn/fadeOut effect.

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

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

回答2:

instead of .fadeIn() and .fadeOut() try using .show() and .hide() that works good. Use this if animated effect is not important.

来源：https://stackoverflow.com/questions/23384986/jquery-fadein-not-working-properly-in-mobile-chrome-android