Question

我正在构建一个用于即将推出的项目的小型叠加插件，下面的代码有点不完美：

  $(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'，叠加层的第一个内容就会消失，然后新的渐片渐渐消失，但是一个接着一个接一个不是在同一时间（看起来更好，更顺畅）Full code here

Answer 1

您可以存储最后点击的链接：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);
    });
});

jQuery叠加插件

1 个答案: