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

最新推荐文章于 2021-09-25 17:50:24 发布

HOLD ON!

最新推荐文章于 2021-09-25 17:50:24 发布

阅读量280

点赞数

分类专栏： jquery

原文链接：https://www.w3school.com.cn/jquery/effect_animate.asp

版权

jquery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

HOLD ON!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>...
复制链接

扫一扫