本篇文章主要讲述jQuery之实战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;

}

本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！