jquery onclick为拉出添加背景叠加

Question

我目前正在基于我在SO上找到的脚本为网站进行简单的拉出.现在我想为现有函数添加背景覆盖,但我不知道如何以及在何处调用它.

这是拉出的小提琴.

http://jsfiddle.net/hr9bymj1/

这就是功能

 $(function () {
   $("#clickme").click(function () {
        if ($(this).parent().hasClass("popped")) {
            $(this).parent().animate({
                left: '-400px'
            }, {
                queue: false,
                duration: 500
            }).removeClass("popped");

        } else {
            $(this).parent().animate({
                left: "0px"
            }, {
                queue: false,
                duration: 500
            }).addClass("popped");
        }
    });
});

我已经尝试了一些在互联网上找到的方法,但是我无法将click事件与append div结合起来,所以我陷入困境并试图在这里寻求帮助.

谢谢!

Answer 1

尝试这样。

添加另一个具有覆盖类的 div：

<div class="overlay">
</div>
<div id="slideout">
    <div id="slidecontent">
        I am the content. I am the king!
    </div>
    <div id="clickme">
    </div>
</div>

相应地更新 jQuery：

$(function () {

    $("#clickme").click(function () {
        if($(this).parent().hasClass("popped")){
            $(this).parent().animate({left:'-400px'}, {queue: false, duration: 500}).removeClass("popped");
            $(".overlay").fadeOut(500); //hide overlay on popin
        }else {
            $(this).parent().animate({left: "0px" }, {queue: false, duration: 500}).addClass("popped");
            $(".overlay").fadeIn(500); //show overlay on popout
        }
    });
});

演示版