jquery - 如何在将 DOM 元素附加到同一函数中的元素后销毁它

Question

这是代码，我什至不确定为什么它工作得这么好，我不认为第 7 行甚至无效，那么为什么它会做我想要的事情(它降低了不透明度到灯箱的 0 并删除 loginDropDown 元素)？真正让我困惑的是，为什么当我删除第 7 行时它的功能不一样，当第 7 行甚至不是有效的 JQuery 我只是偶然输入它时，这是一个错误吗？如果是，我该如何获取它功能与有效代码相同吗？

function lightBox($this) {
    if (!$('#lightBox').length > 0) {
        $('<div id="lightBox"></div>').prependTo($this);
        $("#lightBox").animate({opacity: '.4'}, 500);
    } else {
        $("#lightBox").animate({opacity: '0'}, 500);
        $('<div id="lightBox"></div>').delete();
    }
}


/** login dropdown **/
$('a#loginDropdownBtn').click(function () {
    $this = $(this);
    if ($(this).hasClass('loginActive')) {
        $('div#loginDropdown').removeClass('loginActive');
    } else {
        $('div#loginDropdown').addClass('loginActive');
        lightBox($this);
    }
    return false;
});

/** login removal **/
$(document).click(function (event) {
    if ($(event.target).parents().index($('#loginDropdown')) == -1) {
        if ($('#loginDropdown').is(":visible")) {
            $('div#loginDropdown').removeClass('loginActive');
        }
    }
})

编辑: 如果我使用-

        $('div#loginDropdown').removeClass('loginActive');
        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });

有效!然而 -

        $("#lightBox").animate({opacity: '0'}, 500, function() {
            $(this).remove();            
        });
        $('<div id="lightBox"></div>').delete();

工作正常...为什么？这是有效的代码吗？我找不到任何表明它有效的代码。

Answer 1

您需要使用回调函数。像这样:

$(document).ready(function () {
    $("#clickMe").click(function () {
        $("#lightBox").animate({opacity: '0'}, 500, function(){$(this).remove()});
    });
});

fiddle :http://jsfiddle.net/vpbKe/

编辑

更改代码以删除登录下拉列表:

$("#lightBox").animate({opacity: '0'}, 500, function(){
    $(this).remove();
    $('div#loginDropdown').removeClass('loginActive');
});