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

妖狐艹你老母 2021-12-05 15:27 492阅读 0赞

### 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： ##

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

学习这件事，不是缺乏时间，而是缺乏努力。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzczMjI5_size_16_color_FFFFFF_t_70]: /images/20211205/4cc7f48aef31499cb7d1d512fff9a56d.png