jQuery覆盖插件

我正在构建一个小的覆盖插件，用于即将到来的项目，以下代码有点不完善：

  $(document).ready(function()
    {

        var clickable_link = $('.p_wrapper p'),
            overlay = $('#overlay'),
            close_overlay = $('.close_overlay');

        clickable_link .click(function(evt){
            evt.preventDefault();
            //if there is no content
            current_link = $(this).attr('class');
            var overlay_content = $('#'+current_link);
            overlay.children().fadeOut(500, function(){
                overlay_content.fadeIn();
            });
            overlay.fadeIn();
        });

        overlay.click(function(){
            overlay.fadeOut();
            overlay.children().fadeOut(500);
        });
    });

---

如果我第一次单击“clickable_link”（可点击链接），一切都很好，但是如果我保持覆盖打开，然后再次单击“clickable_link”（可点击链接），覆盖的第一个内容会淡出，然后新内容会淡出，但一个接一个不同时（看起来更好更平滑）

您可以存储上次单击的链接：

---

好的，这是因为子级返回3个元素，然后调用3个淡出完成回调=>overlay_content.fadeIn（）发生3次。检查我上次的UpdateGraat它工作得很好，但是在这种情况下“promise”是如何工作的？只有在所有淡出回调都已执行时，才会调用done函数。

$(document).ready(function () {

    var clickable_link = $('.p_wrapper p'),
        overlay = $('#overlay'),
        close_overlay = $('.close_overlay');

    overlay.hide();
    var lastLink = null;
    clickable_link.click(function (evt) {
        evt.preventDefault();
        if (lastLink != this) {
            lastLink = this;
            //if there is no content
            current_link = $(this).attr('class');
            var overlay_content = $('#' + current_link);
            overlay.children().fadeOut(500, function () {}).promise().done(function () {
                overlay_content.fadeIn();
            });
            if (!overlay.is(':visible')) overlay.fadeIn();
        }
    });

    overlay.click(function () {
        overlay.fadeOut();
        overlay.children().fadeOut(500);
    });
});