一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第12天，点击查看活动详情。

jquery显示与隐藏效果

一.显示语法规范

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

二.显示参数

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

一.隐藏语法规范

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

隐藏参数与显示参数相同

切换语法规范

一.切换语法规范

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

切换参数也与隐藏和显示的参数相同

下面给一个代码展示一下显示与隐藏以及切换的效果

<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">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
        }
    </style>
</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>

jquery滑动效果以及事件的切换

一.滑动效果

上滑动 slideUp([[speed],[easing],[fn]])

下滑动 slideDown([[speed],[easing],[fn]])

滑动切换 slideToggle([[speed],[easing],[fn]])

接下来用具体代码来展示一下用法

<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">
    <script src="../jquery-3.6.0.js"></script>
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
</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(){
                $("div").slideUp();
                //上滑动 slideUp()
            })
            $("button").eq(2).click(function(){
                //滑动切换 slideToggle()
                $("div").slideToggle(500);
            })
        })
    </script>
</body>
</html>

二.事件切换

hover([over],out)

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

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

事件切换hover的用法

在这里我们以一个具体案例的形式来呈现，假设我们有一个类名为nav的下拉表单，我们要设置鼠标经过时表单下滑，鼠标离开时表单上滑

1.鼠标经过和离开的复合写法

$(".nav>li").hover(funtion(){
    $(this).children("ul").slideDown(200);
},funtion(){
    $(this).children("ul").slideUp(200);
})

2.如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数

$(".nav>li").hover(function(){
    $(this).children("ul").slideToggle();
})

jquery停止动画排队stop

1.动画或效果队列

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

2.停止排队

stop()

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

jquery显示与隐藏以及滑动效果+事件切换+停止动画排队