javascript - 需要onclick事件，让div淡出“THEN”删除div

Question

所以我有 div 的代码。我所需要的只是让 div 淡出，然后在淡出后删除父子。

JSFiddle 链接

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 的解决方案

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

Answer 2

您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 3

您可以使用fadeOut jquery 函数轻松完成此操作。

例子：

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

在此处查看更多示例和文档：http: //api.jquery.com/fadeOut/