页面加载完毕相关信息淡入效果

前言：

　　年关将至，公司一部分同事已经回老家了，虽然过年不回去，但想到明天上完班就放假了内心多少有点激动。工作上的事情不要紧的已经没心情再看了，加之今天领导不在哈哈哈... 搞点自己的爱好！

看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；即可；其他做法与上面产生原因对应解决即可