单击元素淡出 div

Question

我有一个 "mobile" 菜单，桌面版也有看这里：
http://bit.ly/1JTBuWy

单击 "hamburger" 菜单会触发整体环绕 div 的不透明度。你可以在link中看到效果。我要添加的只是另一个触发器，它会在菜单打开时关闭菜单，不仅通过再次单击汉堡菜单，而且在屏幕的整个左侧都是

这是我在点击时触发的部分代码：

jQuery("#page-cover").css("opacity",0.6).fadeIn(300);

然后淡出：

jQuery("#page-cover").css("opacity",0.6).fadeOut(300);

谢谢

Answer 1

您可以定义一个位于屏幕左侧的不可见 div，它通过 jQuery

检测鼠标点击事件

css

.invisibleLeft {
    position:absolute;
    top:0;
    left:0;
    width:10%;   
}

html

<div class="invisibleLeft"></div>

javascript

$(".invisibleLeft").on("click", function(){
    $("#page-cover").css("opacity",0.6).fadeIn(300);
});

Answer 2

所以基本上要感谢@Mox
我决定使用现有的 "page-cover" div 并将其用作点击触发器以获得相同的结果：

jQuery("#page-cover").click(function() {
    jQuery(this).animate({
            right : '0',
    })
    jQuery('body').animate({
            right : '0',
    })
    jQuery('.menu').animate({
            right : '-250',
    })
    jQuery(this).css("opacity",0.6).fadeOut(300);
})

很有魅力！谢谢

单击元素淡出 div

Clicking out of an element fades out div

menu

fade

opacity