jQuery的淡入不是在移动Chrome浏览器的Andr​​oid正常工作 [英] jQuery FadeIn not working properly in Mobile Chrome Android

问题描述

首先，这是工作演示：
http://desainwebsite.com/marux-demo2

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

我想实现的是pretty简单：

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.

这是菜单按钮被点击时，我的code：

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();
});

这是当背景点击

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

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

这code在很多移动浏览器工作良好，但不是在移动Chrome浏览器的Andr​​oid。
该错误是：
黑色背景没有显示后淡出。
尝试点击菜单键一次，然后关闭菜单（单击背景）。并再次打开菜单（单击菜单）。在Android的浏览器，后台留下隐患，但它的存在，因为它仍然是可以点击的。

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浏览器iOS版可是没有这个错误。
我尝试了Android版Firefox以及它的工作。

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

有没有在code任何错误？
请帮我。

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

在此先感谢！

编辑：
哦，当我改变淡入（）/输出（）简单地隐藏（）和show（），它的工作。所以问题一定是这个衰减功能。

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.

推荐答案

在我的经验，我已经用.animate（运气好消除错误），而不是.fadeIn（）或淡出（）。你可以尝试动画黑覆盖div的不透明度，看看是否能解决这个问题。如果合并这与CSS3过渡就可以达到同样的淡入/淡出效果。

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();
});

这篇关于jQuery的淡入不是在移动Chrome浏览器的Andr​​oid正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！