jquery-div提示框渐隐弹出与隐藏 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>jquery div提示框渐隐弹出与隐藏</title>
    <script type="text/javascript" src="jquery.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        input {
            width: 120px;
            height: 30px;
            cursor: pointer;
        }

        #note {
            position: absolute;
            width: 400px;
            padding: 20px;
            background: #eee;
            border: 1px solid #ccc;
            left: 40%;
            z-index: 9999;
            display: none;
        }
    </style>
    <script>
        $(function () {
            $('input').click(function () {
                if (!$('#note').is(':visible')) {
                    $('#note').css({display: 'block', top: '-100px'}).animate({top: '+100'}, 500, function () {
                        setTimeout(out, 3000);
                    });
                }
            });
        });

        function out() {
            $('#note').animate({top: '0'}, 500, function () {
                $(this).css({display: 'none', top: '-100px'});
            });
        }
    </script>
</head>
<body>

<div id="note"><a href="http://www.jb51.net" target="_blank">脚本之家</a></div>
<input type="button" value="点我，30s后消失">

</body>
</html>

 

posted @ 2019-10-23 10:26  grj001  阅读(92)  评论(0)  编辑  收藏  举报