jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务

JQ的特效函数

本次的内容相当于是之前的JS的运动或CSS的过渡效果。

特效函数的共同特点：都是在显示和隐藏一个元素。

即:

style.display="block" 
style.display="none"

一、显示和隐藏的特效函数

show、hide是在特定时间内同时改变了该元素的宽度、高度、透明度。让其具有过渡效果（动画效果）

1. show

   a、不添加参数

   $("元素").show();

   说明：相当于是 JS的 元素.style.display="block";
   没有特效，仅仅只是显示该元素

   b、添加参数

   $('元素').show(时间参数);

   说明：动画效果来显示该元素

   参数说明：写毫秒或单词(下面的方法也一样)

   1. 毫秒： 200、400、800、1000
   2. 英文单词："fast"、"normal"、"slow"

2. hide

   a、不添加参数

   $("元素").hide();//

   说明：相当于是 JS的 元素.style.display="none";
   没有特效，仅仅只是显示该元素

​ b、添加参数

   $("元素").hide(时间参数);

说明：动画效果来显示该元素
参数说明：写毫秒或单词

3. toggle

   toggle=show+hide;
   切换显示或隐藏元素；
   用法跟上面一样。

二、滑动显示和隐藏一个元素

只改变该元素的高度。

1. 显示 slideDown

   //1、不添加参数
   $("元素").slideDown();
   
   //2、添加参数
   $('元素').slideDown(时间参数);

2. 隐藏 slideUp

   //1、不添加参数
   $("元素").slideUp();//
   
   //2、添加参数
   $('元素').slideUp(时间参数);

3. 隐藏+显示 slideToggle

   $('div').slideToggle('slow');//如果div元素是显示，则隐藏，否则显示

三、淡入淡出（显示和隐藏元素）

只改变该元素的透明度。淡入：显示、淡出：隐藏。

1. 淡入 fadeIn

   用法同上

2. 淡出 fadeOut

   用法同上

3. 淡入淡出 fadeToggle

   用法同上

四、特效的链式操作

可以给同一个元素添加多个特效效果。

$('div').hide(500).fadeIn('slow').fadeOut(300);

相关单词：

1. show
2. hide
3. toggle
4. is
5. visible
6. slideDown
7. slideUp
8. slideToggle
9. fadeIn
10. fadeOut
11. fadeToggle

此资源下载链接已被无情的隐藏，请输入验证码解锁：

验证码

确定

请关注本站公众号回复“验证码”，获取验证码。

在微信里搜索“WEB前端全栈圈”或者“imqdcn”或者微信扫描二维码都可以关注微信公众号