jQuery学习第一天（下）

jQuery学习第一天（下）

在这里插入图片描述

目录

1. jQuery效果

1.1 效果总览

在这里插入图片描述

1.2 显示隐藏效果

  • 显示语法
show([speed,[easing],[fn]])
  • 隐藏语法
hide([speed,[easing],[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 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.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: pink;
        }
    </style>
</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(2);
                })
            })
 
            // 3.切换
 
            $('button').eq(2).click(function() {
                $('div').toggle(1000, function() {
                    alert(3);
                })
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

1.3 显示隐藏（上拉和下拉效果）

  • 上滑语法
slideDown([speed,[easing],[fn]])
  • 下滑语法
slideUp([speed,[easing],[fn]])
  • 切换语法
sildeToggle([speed,[easing],[fn]])

示例

<!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.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <button>上拉</button>
    <button>下拉</button>
    <button>切换</button>
    <div></div>
 
    <script>
        // 上拉
        $(function() {
            $('button').eq(0).click(function() {
                $('div').slideUp(500, function() {
                    alert(1);
                })
            })
 
            // 下拉
            $('button').eq(1).click(function() {
                $('div').slideDown(500, function() {
                    alert(1);
                })
            })
 
            // 切换
            $('button').eq(2).click(function() {
                $('div').slideToggle(500, function() {
                    alert(1);
                })
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

1.4 事件切换

  • 语法
hover([over],out)
  • over：鼠标移到元素上触发的函数
  • out：鼠标离开元素触发的函数
  • 如果只写一个函数，则鼠标经过和离开都会触发它

新浪下拉菜单案例

<!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;
            margin-right: 20px;
            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() {
            // 1.获取ul中的所有小li(亲儿子)
            // $('.nav>li').mouseover(function() {
            //     // 2.显示小li中的ul
            //     $(this).children('ul').slideDown(200);
            // });
 
            // $('.nav>li').mouseout(function() {
            //     // 2.显示小li中的ul
            //     $(this).children('ul').slideUp(200);
            // });
 
            // 2.事件切换写法
 
            $('.nav>li').hover(function() {
                $(this).children('ul').slideToggle(200);
            })
 
            // $('.nav>li').hover(function() {
            //     $(this).children('ul').slideDown(200);
            // }, function() {
            //     $(this).children('ul').slideUp(200);
            // })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

1.5 动画队列以及停止排队的方法

1. 动画或效果队列

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

  • 图示

在这里插入图片描述

2. 停止排队

stop()
  • stop()方法用于停止动画或效果
  • stop()方法写在动画或者效果的前面，相当于停止上一次动画
<!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;
            margin-right: 20px;
            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() {
            // 1.获取ul中的所有小li(亲儿子)
            // $('.nav>li').mouseover(function() {
            //     // 2.显示小li中的ul
            //     $(this).children('ul').slideDown(200);
            // });
 
            // $('.nav>li').mouseout(function() {
            //     // 2.显示小li中的ul
            //     $(this).children('ul').slideUp(200);
            // });
 
            // 2.事件切换写法
 
            $('.nav>li').hover(function() {
                // 停止排队
                $(this).children('ul').stop().slideToggle(200);
            })
 
            // $('.nav>li').hover(function() {
            //     $(this).children('ul').slideDown(200);
            // }, function() {
            //     $(this).children('ul').slideUp(200);
            // })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

1.6 淡入淡出效果

  • 淡入
fadeIn([speed,[easing],[fn]])
  • 淡出
fadeOut([speed,[easing],[fn]])
  • 切换
fadeToggle([speed,[easing],[fn]])

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

fadeTo([speed,opacity,[easing],[fn]])
  • 参数
    • opacity：透明度，取值0-1，必须写
    • speed，必须写

示例

<!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>
 
    <style>
        div {
            width: 200px;
            height: 300px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <button>淡入</button>
    <button>淡出</button>
    <button>切换</button>
    <button>渐进到透明度</button>
    <div></div>
 
    <script>
        $(function() {
            // 1.淡入
            $('button').eq(0).click(function() {
                $('div').fadeIn(1000);
            })
 
            // 2.淡出
 
            $('button').eq(1).click(function() {
                $('div').fadeOut(1000);
            })
 
            // 3.切换
            $('button').eq(2).click(function() {
                $('div').fadeToggle(1000);
            })
 
            // 4.渐进到某个透明度
            $('button').eq(3).click(function() {
                $('div').fadeTo(1000, .5);
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

切换透明度案例

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
        }
        
        body {
            background: #000;
        }
        
        .wrap {
            margin: 100px auto 0;
            width: 630px;
            height: 394px;
            padding: 10px 0 0 10px;
            background: #000;
            overflow: hidden;
            border: 1px solid #fff;
        }
        
        .wrap li {
            float: left;
            margin: 0 10px 10px 0;
        }
        
        .wrap img {
            display: block;
            border: 0;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 摸上去兄弟的透明度减低
            // 离开兄弟的透明度提高
            $('.wrap li').hover(function() {
                $(this).siblings().stop().fadeTo(200, .3);
            }, function() {
                $(this).siblings().stop().fadeTo(200, 1);
            })
        })
    </script>
</head>
 
<body>
    <div class="wrap">
        <ul>
            <li>
                <a href="#"><img src="images/01.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/02.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/03.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/04.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/05.jpg" alt="" /></a>
            </li>
            <li>
                <a href="#"><img src="images/06.jpg" alt="" /></a>
            </li>
        </ul>
    </div>
</body>
 
</html>
  • 效果图

在这里插入图片描述

1.7 自定义动画 animate

  • 语法
animate(params,[speed],[easing],[fn])
  • 参数说明
    • params必写：想要修改的样式属性，以对象形式传递，属性名可以不带引号，如果是复合属性要用驼峰命名法设置

示例

<!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>
    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <button>动画</button>
    <div></div>
 
    <script>
        $(function() {
            $('button').click(function() {
                $('div').animate({
                    // 不支持颜色
                    backgroundColor: "yellow",
                    width: 200,
                    height: 300,
 
                    left: 100,
                    top: 100
                }, 5000)
            })
        })
    </script>
</body>
 
</html>
  • 效果图

在这里插入图片描述

手风琴案例

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title>手风琴案例</title>
 
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/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>
    <script src="./jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // 1.选中当前li
            $('.king li').mouseenter(function() {
                // 当前的li小图片淡出隐藏，大图片淡入显示
                $(this).stop().animate({
                    width: 224
                }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
 
                // 其他的li小图片淡出显示，大图片淡出隐藏
                $(this).siblings('li').stop().animate({
                    width: 69
                }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
            }, );
 
        })
    </script>
    <div class="king">
        <ul>
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>
 
    </div>
 
 
 
 
</body>
 
</html>
  • 效果图

在这里插入图片描述

posted @   凌歆  阅读(15)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery学习第一天（上）
· jQuery学习第二天
· 2022最新JavaScript+jQuery笔记
· day01 - jQuery
· jQuery基础总结
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示