jQuery第二天学习总结—— jQuery 效果(显示隐藏、滑入滑出、淡出淡出、自定义动画、停止动画队列、事件切换)

最新推荐文章于 2022-01-12 18:31:11 发布

李穩钰

最新推荐文章于 2022-01-12 18:31:11 发布

阅读量465

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_52819925/article/details/119815284

版权

jQuery 效果

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

显示隐藏：show() /hide()/ toggle();
划入划出：slideDown() /slideUp()/ slideToggle();
淡入淡出：fadeIn() / fadeOut() /fadeToggle()/fadeTo() ;
自定义动画：animate();

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

显示隐藏（对角线动画）

显示隐藏动画，常见有三个方法：show() / hide() /toggle();

显示

语法:

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

参数：

[]表示参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

隐藏

语法:

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

参数：

[]表示参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

切换

语法:

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

参数：

[]表示参数都可以省略，无动画直接显示
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

【建议】平时一般不带参数，直接显示隐藏既可

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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() {
     
            $("button").eq(0).click(function() {
     
                $("div").show(1000, function() {
     
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
     
                $("div").hide(1000, function() {
     
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
     
                $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

</html>

滑入滑出（卷拉门，高度动画）

滑入滑出动画，常见有三个方法：slideDown() /slideUp()/ slideToggle() ;

下滑

语法:

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

参数：

[]表示参数都可以省略
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

上滑

语法:

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

参数：

[]表示参数都可以省略
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

滑动切换

语法:

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

参数：

[]表示参数都可以省略
speed：三种预定速度之一的字符串（"slow"、"normal"、"fast"）或表示动画时长的毫秒数值（如：1000）
easing：（Optional）用来指定切换效果，默认是swing，可用参数linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

示例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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>

</html>

案例：下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
     
            margin: 0;
            padding: 0;
        }
        
        li {
     
            list-style-type: none;
        }
        
        a {
     
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
     
            margin: 100px;

最低0.47元/天解锁文章

李穩钰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第二天学习总结—— jQuery 效果(显示隐藏、滑入滑出、淡出淡出、自定义动画、停止动画队列、事件切换)

jQuery 效果jQuery 给我们封装了很多动画效果，最为常见的如下：显示隐藏：show() /hide()/ toggle();划入划出：slideDown() /slideUp()/ slideToggle();淡入淡出：fadeIn() / fadeOut() /fadeToggle()/fadeTo() ;自定义动画：animate();注意：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。jQuery为我们提供另一个方法，可以停止动画排队
复制链接

扫一扫