1

我正在构建一个用于即将进行的项目的小型叠加插件，以下代码存在一些缺陷：

  $(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”，则覆盖的第一个内容会淡出，然后新的内容会淡入，但一个接一个不在同时（看起来更好更流畅）完整代码在这里

4

1 回答 1

2

您可以存储最后点击的链接：http: //jsfiddle.net/PWV3q/15/

$(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);
    });
});
于 2013-02-14T11:38:53.400 回答