前言：
年關將至，公司一部分同事已經回老家了，雖然過年不回去，但想到明天上完班就放假了內心多少有點激動。工作上的事情不要緊的已經沒心情再看了，加之今天領導不在 哈哈哈... 搞點自己的愛好！
看bootstrap的優站精選時看到了一個頁面加載完畢時的一個淡入效果（http://www.mikeinghamdesign.com/），於是...
效果圖：
實現思路：
此處實現主要用外邊距margin-top屬性和透明度opacity屬性；
1.淡入區塊初始設置一定上外邊距，透明度完全透明；
2.頁面加載完畢利用jquery的animate動畫函數動態減去一定上外邊距，透明給完全不透明，此處我設置執行時間為1s（先執行第一個淡入的區塊，成功顯示后，回調執行第二個要顯示的區塊）；
源碼：
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Mike_Index</title> <style> *{margin:0;padding:0;font-family:'Microsoft YaHei';} a{text-decoration:none;} li{list-style:none;} body {background-color: #1B244B;} .content {height:700px;} .content {overflow:hidden; background-image:url('../Images/mike/heroshot.jpg');background-repeat:no-repeat;background-size:cover;background-position:center center;} .content .opreation{width:500px;margin:260px auto 0 auto;color:#fff;letter-spacing:5px;text-align:center;} .content .opreation .title{letter-spacing:8px;font-size:42px;font-weight:normal;} .content .opreation .text-wrap,.content .opreation button{ margin-top:35px;opacity:0;} .content .opreation .text{letter-spacing:3px;margin-top:5px;} .content .opreation .line{display:block;margin:10px auto 70px auto; width:60px;height:2px;background-color:#0093cb;} .content .opreation button{height:65px;width:210px;line-height:65px;color:#fff;font-size:15px;letter-spacing:3px; background-color:transparent;border:1px solid #fff;border-radius:5px;cursor:pointer; transition:border-color 0.4s linear;} .content .opreation button:hover{border-color:#0093cb;} </style> <script src="~/Scripts/jquery-1.8.2.js"></script> <script> $(function () { txtBtnFadeIn(); }); var txtBtnFadeIn = function () { var $txt = $('.content .opreation .text-wrap'); var $btn = $('.content .opreation button'); setTimeout(function () { var animate_para = { 'margin-top': 0, 'opacity': 1 }; $txt.animate(animate_para, 1000, 'linear', function () { $btn.animate(animate_para, 1000); }); }, 500); } </script> </head> <body> <div class="content"> <div class="opreation"> <h1 class="title">MIKE INGHAM</h1> <div class="text-wrap"> <p class="text">WEB & GRAPHIC DESIGNER</p> <span class="line"></span> </div> <button>GET IN TOUCH</button> </div> </div> </body> </html>
總結：
遇到問題：給子元素div設置margin-top時，發現子元素div沒有距父元素div產生上邊距，而是父元素div距整個頁面產生了上邊距；
問題原因：網上找資料且自己在火狐證實，得出結論：當兩個嵌套的div如果父div與子div之間沒有任何非空元素且父元素div沒有上內邊距且父元素沒有上邊框兩個div會共享上外邊距；
問題解決：通常做法 父元素加overflow：hidden；即可 ；其他做法 與上面產生原因對應解決即可