html變化之間的轉換

我有這兩個功能，一個從頁面中刪除所有內容，一個將其添加回來。當一切都被刪除時，一個黑色的屏幕顯示在中間有一個加載標誌。html變化之間的轉換

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就像是從來沒有使用過這樣呀:)

來源

2013-04-04 FabianCook

而不是做的.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)

來源

2013-04-04 20:40:39

這真棒。不知道你能做到這一點。 – FabianCook 2013-04-04 20:43:10

似乎沒有工作D：'Obj.bodyElements沒有方法'detach'' – FabianCook 2013-04-04 20:45:39

@SmartLemon事實上，我犯了一個錯誤。更正...修正。 – 2013-04-04 20:46:17

。利用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; 
}

來源

2013-04-04 20:40:44

不要將身體有覆蓋類。

取而代之，創建一個覆蓋身體的div，它總是擁有該類。班級應該有「顯示：無;」

當你想殺死你的頁面，你可以做到這一點使用jQuery：

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

然後你可以按下面替換的內容，你可能想這樣做，覆蓋已經顯示出後，然後隱藏覆蓋，像這樣：

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

來源

2013-04-04 20:41:58

html變化之間的轉換

回答

相關問題