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

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一样，

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

或者你可以使用淡出然后取出样，

$('#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 
     });  
    }); 
});