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

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

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

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

即:

style.display="block" 
style.display="none"
一、显示和隐藏的特效函数

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

  1. show
    a、不添加参数
$("元素").show();

说明:相当于是 JS的 元素.style.display=“block”;

没有特效,仅仅只是显示该元素

  1. b、添加参数
$('元素').show(时间参数);

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

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

  1. 毫秒: 200、400、800、1000
  2. 英文单词:“fast”、“normal”、“slow”
  1. hide
    a、不添加参数
$("元素").hide();//

说明:相当于是 JS的 元素.style.display=“none”;

没有特效,仅仅只是显示该元素

b、添加参数

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

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

参数说明:写毫秒或单词

  1. toggle
toggle=show+hide;
切换显示或隐藏元素;
用法跟上面一样。
二、滑动显示和隐藏一个元素

只改变该元素的高度。

  1. 显示 slideDown
//1、不添加参数
$("元素").slideDown();
//2、添加参数
$('元素').slideDown(时间参数);
  1. 隐藏 slideUp
//1、不添加参数
$("元素").slideUp();//
//2、添加参数
$('元素').slideUp(时间参数);
  1. 隐藏+显示 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

案例、笔记、作业:imqd.cn/?p=201

相关文章
|
4月前
|
JavaScript
jQuery - 添加元素
通过 jQuery,可以很容易地添加新元素/内容。
55 10
|
1月前
jQuery+CSS3实现404背景游戏动画源码
jQuery+CSS3实现404背景游戏动画源码
50 22
|
2月前
|
JavaScript
jquery文字动画特效插件animatext
jquery文字动画特效插件animatext
53 9
|
4月前
|
JavaScript 前端开发 UED
jQuery 动画
【10月更文挑战第8天】
121 55
|
2月前
|
JavaScript 前端开发
jquery输入框键入文字动画特效
这是一款炫酷的jquery输入框键入文字动画特效。该文字特效在用户键入字母时,通过jquery代码来制作文字的动画效果,非常炫酷。
37 0
|
3月前
jQuery+CSS3模拟过山车动态的文字动画特效源码
jQuery+CSS3模拟过山车动态的文字动画特效源码实现在全黑的背景下,画面中的文本呈现过山车的轨迹动画上下滚动转圈,且伴随文本颜色渐变效果,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
33 1
|
5月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
5月前
|
JavaScript
jQuery 停止动画
jQuery 停止动画
31 4
|
5月前
|
JavaScript 前端开发
jQuery - 添加元素
jQuery - 添加元素
29 2
|
5月前
|
缓存 JavaScript 前端开发
jQuery 效果- 动画
jQuery 效果- 动画
39 4