转换之间的html更改

Question

我有这两个函数，一个从页面中删除所有内容，一个将其添加回来。当所有的东西都被删除时，一个带有加载标志的黑色屏幕出现在中间。

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。谢谢:)

我知道这样做会删除所有绑定等，但我已经考虑到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)进行过渡

Answer 2

利用CSS3过渡:

body {
    -webkit-transition: 0.5s background ease;
    -moz-transition: 0.5s background ease;
    -o-transition: 0.5s background ease;
    transition: 0.5s background ease;
}

Answer 3

不要将body设置为覆盖类。

相反，创建一个div放在body之上，它总是有那个类。类应该有"display: none;"

当你想终止你的页面时，你可以使用jQuery:

$('#overlay').show(500);

然后你可以替换下面的内容，你可能想这样做，在覆盖显示后，然后隐藏覆盖，像这样:

$('#overlay').show(500, function() {
    // replace the page contents here
}).hide(500);