需要onclick事件，使div淡出「THEN」刪除div

Question

所以我有代碼爲div。我需要的只是讓div淡出，然後在淡入淡出之後去除父親的孩子。

JSFiddle Link

HTML

<div onclick="fadeOut(this)" id="fadeOut"> 
    <div id="divText"> 
     This is a simple div with some text in it. This is another line of text. 
     All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest! 
    </div> 
</div> 

的CSS位於的jsfiddle鏈接。

Answer 1

您通過標籤指示jQuery，所以這裏是一個jQuery解決方案。它將回調函數傳遞給fadeOut函數，該函數刪除#divText。

function fadeOut(i) { 
    $(i).fadeOut(3000, function(){ 
     $("#divText").remove(); 
    }); 
} 

我建議的一個改進是通過javascript而不是內聯附加事件處理程序。

的Javascript

$("#fadeOut").click(function(){ 
    $(this).fadeOut(3000, function(){ 
     $("#divText").remove(); 
    }); 
}); 

HTML

<div id="fadeOut"> 
    <!--Content Here --> 
</div> 

JS小提琴：http://jsfiddle.net/ZGp62/1/

Answer 2

我知道這個解決方案在jQuery的

$("#fadeout").ckick(function(){ 
$(this).find("div").fadeOut().parent().remove(); 
}); 

Answer 3

你可以用fadeOut jquery函數輕鬆做到這一點。

例子：

$("#buttonID").click(function() { 
    $("#thedivID").fadeOut("slow", function() { 
     //this removes the div from the DOM 
     $("#thedivID").remove(); 
    }); 
}); 

查看更多實例和文檔在這裏：http://api.jquery.com/fadeOut/