jQuery删除一个元素后淡出效果展示删除过程的方法

jQuery删除一个元素后淡出效果展示删除过程的方法，html结构如下：

<li>
    <div class="qiniuImgIcon">
        <a rel="lightbox" href="#">
            <img src="images/image_icon.png">
        </a>
    </div>
    <div class="fileName"><p>5b84ed08a13f7.jpg</p></div>
    <div class="fileSize"><p>2.3 MB</p></div>
    <div class="filePutTime"><p>2020-03-23 18:21:25</p></div>
    <div class="operateAct">
        <p>
            <span class="replaceBtn" file_name="5b84ed08a13f7.jpg">替换</span>
            <span key="5b84ed08a13f7.jpg" class="deleteBtn">删除</span>
            <span class="copyBtn" url="#">外链</span>
        </p>
    </div>
</li>

点击删除二字移除整个li元素，代码示例：

$('.deleteBtn').click(function () {
    if (confirm('您确定要删除吗？')) {
        $this = $(this);
        $.ajax({
            type: 'post',
            cache: false,
            url: '',
            data: 'action=deleteFile&key=' + $this.attr('key'),
            success: function (data) {
                if (!data.errcode) {//删除成功
                    //最直接的方法，直接移除元素
                    //$this.parent().parent().parent().remove();

                    //特效
                    $this.parent().parent().parent().fadeTo("slow", 0.01, function () {//fade
                        $(this).slideUp("slow", function () {//slide up
                            $(this).remove();//then remove from the DOM
                        });
                    });

                    return false;
                }
                //删除失败
                alert(data.message);
            }
        });
    }
});