jQuery效果

jQuery

jQuery效果

导读

image-20230308234650952

image-20230308234702686

1. 显示隐藏切换

1.1 显示 show()

image-20230309005930363

1.2 隐藏 hide()

image-20230309005956414

1.3 切换 toggle()

image-20230309010008060

1.4 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function () {
            // 显示隐藏动画，常见有三个方法：show() / hide() / toggle() ;
            // show([speed,[easing],[fn]])
            // （1）参数都可以省略， 无动画直接显示。
            // （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
            // （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
            // （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

            $('button:first').click(function () {
                $('div').show('slow');
            });
            $('button').eq(1).click(function () {
                $('div').hide('slow');//$('div').hide('1000')
            });
            $('button:last').click(function () {
                $('div').toggle('slow', function () {
                    alert('Please');
                });
            });
        })
    </script>
</body>

</html>

2. 滑入滑出切换

2.1 下滑 slideDown()

image-20230309012027215

2.2 上滑 slideUp()

image-20230309012039067

2.3 滑动切换 slideToggle()

image-20230309012050529

2.4 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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-3.6.0.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>

2.5 下拉菜单案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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;
        }

        .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-3.6.0.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() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });

            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });

            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法,俩个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>

</html>

3. 淡入淡出切换

3.1 淡入 fadeIn()

image-20230309012611217

3.2 淡出 fadeOut()

image-20230309012621499

3.3 淡入淡出切换 fadeToggle()

image-20230309012630700

3.4 渐变 fadeTo()

image-20230309012642164

3.5 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function () {
            // 1.淡入效果语法规范
            // fadeIn([speed,[easing],[fn]])
            $('button:first').click(function () {
                $('div').fadeIn('slow');
            })

            // 2.淡出效果语法规范
            // fadeOut([speed,[easing],[fn]])
            $('button').eq(1).click(function () {
                $('div').fadeOut('fast');
            })

            // 3.淡入淡出切换效果语法规范
            // fadeToggle([speed,[easing],[fn]])
            $('button').eq(2).click(function () {
                $('div').fadeToggle(1000)
            })

            // 4.淡入淡出切换效果语法规范
            // fadeTo([[speed],opacity,[easing],[fn]])
            $('button:last').click(function () {
                $('div').fadeTo(1000,0.5)
            })

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

            // （1）参数都可以省略。
            // （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
            // （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
            // （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

        })
    </script>
</body>

</html>

3.6 高亮显示案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 620px;
            height: 410px;
            margin: 100px auto;
            background-color: rgb(0, 0, 0);
            padding: 10px;
        }

        .imgbox {
            width: 200px;
            height: 200px;
            float: left;
            margin-right: 10px;
        }

        .imgbox:nth-child(3) {
            margin-right: 0;
        }

        .imgbox:nth-child(6) {
            margin-right: 0;
        }

        .imgbox:nth-child(n+4) {
            margin-top: 10px;
        }

        .imgbox img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="imgbox">
            <img src="./images/01.jpg" alt="" srcset="">
        </div>
        <div class="imgbox">
            <img src="./images/02.jpg" alt="" srcset="">
        </div>
        <div class="imgbox">
            <img src="./images/03.jpg" alt="" srcset="">
        </div>
        <div class="imgbox">
            <img src="./images/04.jpg" alt="" srcset="">
        </div>
        <div class="imgbox">
            <img src="./images/05.jpg" alt="" srcset="">
        </div>
        <div class="imgbox">
            <img src="./images/06.jpg" alt="" srcset="">
        </div>
    </div>

    <script>
        // 原生js
        // var imgBox = document.querySelectorAll('.imgbox')
        // for (var i = 0; i < imgBox.length; i++) {
        //     imgBox[i].style.transition = 'all 0.5s ease-in-out';
        //     imgBox[i].addEventListener('mouseover', function () {
        //         for (var j = 0; j < imgBox.length; j++) {
        //             imgBox[j].style.opacity = 0.5
        //         }
        //         this.style.opacity = 1
        //     })
        //     imgBox[i].addEventListener('mouseout', function () {
        //         for (var j = 0; j < imgBox.length; j++) {
        //             imgBox[j].style.opacity = 1
        //         }
        //     })
        // }

        // jquery
        $(function() {
            $(".imgbox").mouseover(function(){
                $(this).siblings().stop().fadeTo(300,0.5)
            })
            $(".imgbox").mouseout(function(){
                $(this).siblings().stop().fadeTo(300,1)
            })
        })
    </script>
</body>

</html>

4. 自定义动画

4.1 动画 animate()

image-20230309012749598

4.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <button>move</button>
    <div></div>
    <script>
        $(function () {
            $('button').click(function () {
                $('div').animate({
                    left:200,
                    top:200,
                    width: 0,
                    height: 0,
                    opacity: 0
                },500)
            });

            // 自定义动画 animate
            // animate(params,[speed],[easing],[fn])
            // （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
            //              取驼峰命名法 borderLeft。其余参数都可以省略。
            // （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
            // （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
            // （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
        })
    </script>
</body>

</html>

4.3 停止动画排队 stop()

image-20230309012832601

4.4 手风琴案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
        }

        ul {
            list-style: none;
        }

        .king {
            width: 852px;
            margin: 100px auto;
            background: url('./images/wang/bg.png') no-repeat;
            overflow: hidden;
            padding: 10px;
        }

        .king ul {
            overflow: hidden;
        }

        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }

        .king li.current {
            width: 224px;
        }

        .king li.current .big {
            display: block;
        }

        .king li.current .small {
            display: none;
        }

        .big {
            width: 224px;
            display: none;
        }

        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="./images/wang/m1.jpg" alt="" class="small">
                    <img src="./images/wang/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/l1.jpg" alt="" class="small">
                    <img src="./images/wang/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/c1.jpg" alt="" class="small">
                    <img src="./images/wang/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/w1.jpg" alt="" class="small">
                    <img src="./images/wang/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/z1.jpg" alt="" class="small">
                    <img src="./images/wang/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/h1.jpg" alt="" class="small">
                    <img src="./images/wang/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="./images/wang/t1.jpg" alt="" class="small">
                    <img src="./images/wang/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>
    <script>
        $(function () {
            // 1.鼠标经过某个小li 有两步操作：
            $('ul>li').mouseover(function () {
                // 2.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();

                // 3.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings().stop().animate({
                    width: 69
                }).find('.big').stop().fadeOut().siblings('.small').stop().fadeIn();
            })
        })
    </script>
</body>

</html>

5. 事件切换

5.1 鼠标经过 hover()

image-20230309012918386

5.2 代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!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;
        }

        .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-3.6.0.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() 显示元素  hide() 隐藏元素
            //     $(this).children("ul").slideDown(200);
            // });

            // // 鼠标离开
            // $(".nav>li").mouseout(function() {
            //     $(this).children("ul").slideUp(200);
            // });

            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法,俩个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>

</html>

Solar-Rain程序 & 设计

随心所欲，不逾矩 ~