【jQuery】常用API——jQuery效果

早睡早起长头发

已于 2023-01-10 19:22:40 修改

阅读量520

点赞数

分类专栏： jQuery 文章标签： javascript jquery 前端 Powered by 金山文档

于 2023-01-10 07:27:48 首次发布

本文链接：https://blog.csdn.net/weixin_51481135/article/details/128593471

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery 给我们封装了很多动画效果，最为常见的如下：

一、显示隐藏切换效果

1. 显示语法规范

show([speed,[easing],[fn]]);

显示参数：

（1）参数都可以省略，无动画直接显示。

（2）speed：三种预定速度之一的字符串( “slow”，“normal"， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 隐藏语法规范

hide([speed,[easing],[fn]]);

隐藏参数：

（1）参数都可以省略，无动画直接显示。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 切换语法规范

toggle([speed,[easing],[fn]]);

切换参数：

（1）参数都可以省略，无动画直接显示。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：动画并不好看，因此平时一般不带参数，直接显示隐藏即可。

    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            // 1. 显示
            $("button").eq(0).click(function () {
                $("div").show(1000, function () {
                    alert(1);
                });
            })
            // 2. 隐藏
            $("button").eq(1).click(function () {
                $("div").hide(1000, function () {
                    alert(1);
                });
            })
            // 3. 切换：点一下隐藏，再点一下显示
            $("button").eq(2).click(function () {
                $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

二、滑动效果

1. 下滑效果语法规范

slideDown([speed,[easing],[fn]]);

下滑效果参数：

（1）参数都可以省略。

（2）speed:三种预定速度之一的字符串( “slow”， “normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 上滑效果语法规范

slideUp([speed,[easing],[fn]]);

上滑效果参数：

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 滑动切换效果语法规范

slideToggle([speed,[easing],[fn]]);

滑动切换效果参数：

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function () {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function () {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });

        });
    </script>
</body>

三、事件切换

hover([over,]out);

over：鼠标移到元素上要触发的函数（相当于 mouseenter ）

out：鼠标移出元素要触发的函数（相当于 mouseleave ）

如果只写一个函数，则鼠标经过和离开都会触发它。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            // 简化一：添加滑动
            // 鼠标经过
            // $(".nav>li").mouseover(function() {
            //     // $(this) jQuery 当前元素  this不要加引号
            //     // show()：显示元素  slideDown()：下滑动
            //     $(this).children("ul").slideDown(200);
            // });
            // // 鼠标离开 slideUp()：上滑动
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });


            // 简化二：滑动+事件切换
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法。
            // $(".nav>li").hover(function() {}, function() {});第一个函数是鼠标经过时触发的函数；第二个函数离开时触发
            // $(".nav>li").hover(function() {
            //     $(this).children("ul").slideDown(200);
            // }, function() {
            //     $(this).children("ul").slideUp(200);
            // });
            // 2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $(".nav>li").hover(function () {
                $(this).children("ul").slideToggle();
            });
        })
    </script>
</body>

四、动画队列及其停止排队方法

1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

2. 停止排队

stop(); //用于停止动画或效果

注意： stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
            font-size: 14px;
        }

        .nav {
            margin: 100px;
        }

        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }

        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }

        .nav>li>a:hover {
            background-color: #eee;
        }

        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }

        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }

        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function () {
            $(".nav>li").hover(function () {
                // stop 方法必须写到动画的前面
                $(this).children("ul").stop().slideToggle();
            });
        })
    </script>
</body>

五、淡入淡出效果

1. 淡入效果语法规范

fadeIn([speed,[easing],[fn]]);

淡入效果参数：

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”，or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 淡出效果语法规范

fadeOut([speed,[easing],[fn]]);

淡出效果参数：

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”， or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 淡入淡出切换效果语法规范

fadeToggle([speed,[easing],[fn]]);

淡入淡出切换效果参数：

（1）参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”, or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

4. 渐进方式调整到指定的不透明度

fadeTo([[speed],opacity,[easing],[fn]]);

效果参数：

（1）opacity 透明度必须写，取值 0~1 之间。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”，or “fast” )或表示动画时长的毫秒数值(如：1000)。必须写

（3）easing：(Optional) 用来指定切换效果，可省略。默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次，可省略。

    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="../jquery.min.js"></script>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            $("button").eq(0).click(function () {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function () {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);

            })
            $("button").eq(2).click(function () {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);

            });
            $("button").eq(3).click(function () {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

六、自定义动画 animate

1. 语法

animate(params,[speed],[easing],[fn]);

2. 参数

（1）params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。

（2）speed：三种预定速度之一的字符串( “slow”，“normal”，or “fast” )或表示动画时长的毫秒数值(如：1000)。

（3）easing：(Optional) 用来指定切换效果，默认是 “swing” ，可用参数 “linear” 。

（4）fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

    <script src="../jquery.min.js"></script>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function () {
            $("button").click(function () {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4, // 40%透明度
                    width: 500
                }, 500);
            })
        })
    </script>
</body>