javascript - html变化之间的过渡

Question

我有这两个功能，一个从页面中删除所有内容，一个将其添加回去。删除所有内容后，会显示一个黑色屏幕，中间有一个加载 Logo 。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.tempHtml = $('body').html();
        $('body').html('');
        $('body').addClass('overlay');
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $('body').html(Obj.tempHtml);
        delete Obj.tempHtml;
        $('body').removeClass('overlay');
        r = true;
    }
    return r;
};

和 CSS 类 overlay:

.overlay
{
    background-color: #111;
    background-position: center;
    background-image: url('../img/loading_black.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

现在，我怎样才能在两者之间顺利过渡？

现在它只是直接进入黑屏并且看起来不对。我不知道该怎么做。

JS/jQuery 或 CSS 解决方案都可以:)。虽然首选 CSS。谢谢:)

我知道这样做会删除所有绑定(bind)等，但我已经考虑到这一点并且 hideLoading 就像从未使用过一样，是的:)

Answer 1

不要执行 .html('') 和 .html(string)，只需分离元素即可。

Base.showLoading = function () {
    var r = false;
    if (!$('body').hasClass('overlay')) {
        Obj.bodyElements = $('body').children().fadeOut(200);
        Obj.bodyElements.promise().done(function(){
            Obj.bodyElements.detach();
            $('body').addClass('overlay');
        });        
        r = true;
    }
    return r;
};

Base.hideLoading = function () {
    var r = false;
    if ($('body').hasClass('overlay')) {
        $(Obj.bodyElements.get()).appendTo('body');
        $('body').removeClass('overlay');
        $('body').children().fadeIn(200);
        r = true; 
    }
    return r;
};

我还添加了如何使用 .fadeOut(200) 进行转换