html提示信息框淡入淡出效果（自己的思路，如果有更好的思路，請留言）

使用方法：

調用initMessagebox(“要顯示的文字”)方法即可

<!--信息框-->
<div id="messagebox"></div>
<!--Load Jquery-->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        /*提示信息框動態效果*/
        var messageboxT;
        var top1 = 10;
        var opacity = 0;
        //初始化數據
        function initMessagebox(info) {
            top1 = 10;
            opacity = 0;
            opacity1 = 1;
            $("#messagebox").html(info);
            $("#messagebox").css({ 'display': 'block' });
            appearMessagebox();
        }
        //出現信息框
        function appearMessagebox() {
            top1 += 1;
            opacity += 0.05;
            if (opacity < 1) {
                messageboxT = setTimeout("appearMessagebox()", 15);
            }
            else {
                disappearMessagebox();
            }
            $("#messagebox").css({ 'top': String(top1) + 'px' });
            $("#messagebox").css({ 'opacity': String(opacity) });
        }
        //隱藏信息框
        function disappearMessagebox() {
            opacity -= 0.05;
            if (opacity > 0.05) {
                messageboxT = setTimeout("disappearMessagebox()", 40);
            }
            else {
                opacity = 0;
                $("#messagebox").css({ 'display': 'none' });
            }
            $("#messagebox").css({ 'opacity': String(opacity) });
        }
    </script>

用到的css

#messagebox {
    width:200px;
    height:40px;
    background-color:#f66;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:10px auto;
    display:none;
    z-index:999;
    text-align:center;
    line-height:40px;
}