Question

我有这种od功能

$(document).ready(function() {
    $('footer').each(function() {
        $(this).parent().append('<div id="overlay"></div>');
    });
});
$("[data-action]").click(function(data) {
    var link = $(this).attr('data-action');
    $("#overlay").fadeToggle();
    $.get(link, function(data) {
        $("#navigation-control").empty().append(data);
    });

});

将#overlay添加到页脚父级，问题是ppend仅在文档就绪时发生。我需要的是在点击功能中追加和删除#overlay，我不希望该元素始终在页面上，但我有问题在哪里调用它以及在切换时将其删除？

像这样的东西

$("[data-action]").click(function(data) {
    var link = $(this).attr('data-action');
    $('footer').parent().append('<div id="overlay"></div>');
    $("#overlay").fadeToggle();
    $.get(link, function(data) {
        $("#navigation-control").empty().append(data);
    });
   $('#overlay').remove();
});

但我想在第二次点击时保留叠加才能删除？这种覆盖方式根本不显示，因为它是追加和删除??

Answer 1

尝试使用setTimeout like，

setTimeout(function(){
    $('#overlay').remove();
},1000); // for 1 second delay

或者你可以使用fadeOut然后删除like，

$('#overlay').fadeOut(1000).remove(); // with effects

完整代码

$(document).ready(function() {
    $('footer').each(function() {
        $(this).parent().append('<div id="overlay"></div>');
    });    
    $("[data-action]").click(function(data) {
        var link = $(this).attr('data-action');
        $('footer').parent().append('<div id="overlay"></div>');
        $.get(link, function(data) {
            $("#navigation-control").empty().append(data);
            $('#overlay').fadeOut(1000).remove(); // after performing your data
        });       
    });
});

点击时使用fadetoggle添加和删除元素？

1 个答案: