「这是我参与2022首次更文挑战的第16天，活动详情查看：2022首次更文挑战」。

前言

大家好，我是程序猿小白 gw_Gw，很高兴能和大家一起学习进步。

以下内容部分来自于网络，如有侵权，请联系我删除，本文仅用于学习交流，不用作任何商业用途。

摘要

本文主要介绍Jquery显示和隐藏，淡入淡出以及滑动等动画。

JQuery动画

1.1 显示和隐藏

【语法格式】

//隐藏。
$(selector).hide(speed,[easing],callback);
//显示。
$(selector).show(speed,[easing],callback);
//切换，如果是隐藏切换为显示，如果是显示切换为隐藏。
$(selector).toggle(speed,[easing],callback);

参数解释：

1. speed：显示或隐藏的速度，可以是"slow","normal","fast",或者使用毫秒为单位。

2. easing：可选参数，表示缓动函数，如果不写默认取值为"swing"，还可以取值"linear"。

   swing表示显示或隐藏的速度为慢快慢，linear代表匀速。

3. callback：回调函数，显示或隐藏后所执行的函数。

【实例展示】：

1. 隐藏div1后，弹出提示信息，隐藏的过程为1秒。

$("#div1").hide(1000,function(){
    alert("我被隐藏了");
});

2. 显示div1后，弹出提醒信息，显示过程为快，且匀速显示。

$("#div1").show("fast","linear",function(){
    alert("我被显示了");
});

3. 切换显示和隐藏，弹出提醒信息，显示过程为慢，且匀速显示。

$("#div1").toggle("slow","linear",function(){
    alert("切换");
});

1.2 淡入淡出

【语法格式】

//淡入
$(selector).fadeIn([speed],[easing],[callback])
//淡出
$(selector).fadeOut([speed],[easing],[callback])
//切换淡入淡出
$(selector).fadeToggle([speed,[easing],[callback])
//不完全淡出，改变元素到指定透明度，
$(selector).fadeTo(speed,opacity,[callback]);

参数解释同上：opacity表示不透明度，取值为0~1。0是完全透明，即淡出，1不改变。

【实例展示】：

1. 淡出div1后，弹出提示信息，淡出的过程为1秒。

$("#div1").fadeOut(1000,function(){
    alert("我被淡出了");
});

2. 淡入div1后，弹出提醒信息，显示过程为快，且匀速显示。

$("#div1").fadeIn("fast","linear",function(){
    alert("我被淡入了");
});

3. 切换淡入和淡出，弹出提醒信息，显示过程为慢，且匀速显示。

$("#div1").fadeToggle("slow","linear",function(){
    alert("切换");
});

4. 不完全淡出div1，不透明度为0.5。

$("#div1").fadeTo("slow",0.5);

1.3 滑动

【语法格式】

//向下滑动，即展开弹出
$(selector).slideDown([speed],[easing],[callback])
//向上滑动，即收起
$(selector).slideUp([speed,[easing],[callback]])
//切换向上滑动和向下滑动
$(selector).slideToggle([speed],[easing],[callback])

参数解释同上。

【实例展示】：

1. 隐藏div1后，弹出提示信息。

$("#div1").slideUp(function(){
    alert("向上收起");
});

2. 显示div1后，弹出提醒信息。

$("#div1").slideDown(function(){
    alert("向下展开");
});

3. 切换显示和隐藏，弹出提醒信息。

$("#div1").slideToggle(function(){
    alert("切换");
});

小结

以上就是关于Jquery动画中的显示和隐藏，淡入和淡出以及滑动效果，希望能对读者有所帮助，如有不正之处，欢迎留言指正。