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（字符串），只需分离元素。

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

不要将主体设置为具有覆盖类。

相反，创建一个遍历正文的div，它始终具有该类。该类应该有“display：none;”

如果要杀死页面，可以使用jQuery执行此操作：

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

然后你可以替换下面的内容，你可能想要在叠加显示之后这样做，然后隐藏叠加层，如下所示：

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

html改变之间的转换

3 个答案: