点击一个元素淡出 div答案

【问题标题】：Clicking out of an element fades out div点击一个元素淡出 div
【发布时间】：2015-07-30 05:11:21
【问题描述】：

我有一个桌面版的“移动”菜单看这里：
http://bit.ly/1JTBuWy

点击“汉堡”菜单会触发整个 wrap div 的不透明度。您可以在链接中看到效果。我要添加的只是另一个触发器，它会在菜单打开时关闭菜单，不仅通过再次单击汉堡菜单，而且在整个左侧都是屏幕

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

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

这会将其淡出：

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

谢谢

【问题讨论】：

标签： menu opacity fade

【解决方案1】：

您可以定义一个位于屏幕左侧的不可见 div，它通过 jQuery 检测鼠标 onclick 事件

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

【讨论】：

嗯..你的回答基本上给了我一个方向，但我可以使用我现有的“page-cover”div并单击它来获得相同的结果，而不是使用另一个div。非常感谢@Mox

【解决方案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);
})

像魅力一样工作！谢谢

【讨论】：