如何在HTML頁面加載時淡出消息+引導

我希望在瀏覽器中加載索引頁時，當前div將在3秒後淡出。當div隱藏頁面的主要內容（菜單，圖像等）顯示。我也在我的頁面中使用bootstrap css如何在HTML頁面加載時淡出消息+引導

我在以下問題中得到堆棧。問題是我的JS功能不工作。

這裏是我的HTML頁面的主體至今：

<body> <div id="fade"> 
     <div id="box"> 
      <blockquote class="blockquote-reverse"> 
       <p>Blah Blah</p> 
       <footer>Project Manager of <cite title="Source Title">Some project</cite></footer> 
     </blockquote> 
     </div> 
    </div> 

<!-- blah blah here comes the rest of the site --> </body>

這裏是我的CSS文件：

#box { 
    font-family: 'Playfair Display'; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

#fade { 
    height:100vh; 
    background-color: black; 
}

，這裏是JS文件：

$(document).ready(function(){ 
    $('#box').delay(300).fadeOut(300); 
});

注我使用BootStrap（如前所述）。

來源

2015-05-15 Bill

如果你可以創建一個重現問題的小提琴，那將會有所幫助。你是否在控制檯中發現錯誤？ – Ted

嘗試使用$（window）.load（function（）{..fadeOut here ...}）; –

delay（'milliseconds'） - 意思是你有300毫秒的等待時間，你需要3000秒3秒 – ElliotM

使用代替.ready()，因爲load等待，直到你的頁面加載它的所有內容，但ready，當腳本已準備就緒。

$(window).load(function(){ 
    // your code 
});

而且你不需要delay。

這裏有一個客廳演示：http://jsfiddle.net/sox59a1a/

來源

2015-05-15 13:18:49

不，它不起作用 – Bill

您是否檢查演示？ –

是的。這不是我的問題。我希望'fade' div隱藏頁面的所有其他containts，不要在其下面顯示。然後當它淡出他們的狂歡 – Bill

如果我沒有理解錯誤，你可以做你說什麼是什麼：

$(window).load(function(){ 
    $("#fade").fadeOut(1000, function(){ 
     $("#restOfPage").fadeIn(1000); 
    }); 
});

這是一個非常簡單的例子，但你可以開始做你想要什麼有這個..

小提琴：

https://jsfiddle.net/sox59a1a/3/

來源

2015-05-15 13:34:47

謝謝你的嘗試。頁面的其餘部分淡入操作不再是必需的。我編輯了CSS，現在我只需要淡出的操作，而這又不起作用。 – Bill

我知道它聽起來很粗魯，但是，你是否導入了jQuery庫？ –

是的，我現在檢查了它。我用Bootstrap正確添加了它，並且一切正常。但不是我的淡出功能：'' – Bill

如何在HTML頁面加載時淡出消息+引導

回答

相關問題