使用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 
     });  
    }); 
});