jQuery常用到的动画效果（显示、消失）--笔记

最新推荐文章于 2024-03-02 11:18:58 发布

William Wang

最新推荐文章于 2024-03-02 11:18:58 发布

阅读量502

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 前端技术

本文链接：https://blog.youkuaiyun.com/qq_42773229/article/details/96284762

前端技术同时被 2 个专栏收录

13 篇文章

订阅专栏

jQuery

3 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动画效果示例，包括显示、消失、滑动和淡入淡出等基本动画操作，并展示了如何通过按钮触发不同的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery常用到的动画--显示、消失

HTML代码
- head-code example：
- body-code example：

HTML代码

head-code example：

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="http://data.stats.gov.cn/js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $(but1).on("click", function () {
                $("img").hide(500); //消失
            });
            $(but2).on("click", function () {
                $("img").show(5000); //显现
            });
            $(but3).on("click", function () {
                $("img").slideUp(5000); //滑动消失
            });
            $(but4).on("click", function () {
                $("img").slideDown(5000); //滑动显现
            });
            $(but5).on("click", function () {
                $("img").slideToggle(5000); //滑动切换（消失后显现，显现后消失）
            });
            $(but6).on("click", function () {
                $("img").fadeOut(5000); //淡出
            });
            $(but7).on("click", function () {
                $("img").fadeIn(5000); //淡入
            });
            $(but8).on("click", function () {
                $("img").fadeTo(500, 0.5); //淡化
            });
            $(but9).on("click", function () {
                $("div").animate({ left: "800px" }, 5000); //移动（需要调整对象的style属性中position的值absolute）
            });
        });
    </script>
    <style type="text/css">
        input {
            border: 1px solid #eee;
            padding: 5px 10px;
            border-radius: 4px;
            background: #08d3f3;
            color: #fff;
            font-weight: bold;
        }
    </style>
</head>

body-code example：

<body>
    <input type="button" id="but1" value="消失" />
    <input type="button" id="but2" value="显现" />
    <input type="button" id="but3" value="滑动消失" />
    <input type="button" id="but4" value="滑动显现" />
    <input type="button" id="but5" value="滑动切换" />
    <input type="button" id="but6" value="淡出" />
    <input type="button" id="but7" value="淡入" />
    <input type="button" id="but8" value="淡化" />
    <input type="button" id="but9" value="移动" />
    <div style="position: absolute;">
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563349946500&di=9cb731dc890121f76997346945d54806&imgtype=0&src=http%3A%2F%2Fwww.51cto.com%2Ffiles%2Fuploadimg%2F20111215%2F2054162.jpg" height="200">
    </div>
</body>

效果图，如下：
在这里插入图片描述
结束。