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:;

    right:;

    top:;

    bottom:;

    margin:10px auto;

    display:none;

    z-index:;

    text-align:center;

    line-height:40px;

}