js进阶 13-1 jquery动画中的显示隐藏函数有哪些

一、总结

一句话总结：show()，hide()，toggle()，这三个。

1、jquery动画中显示隐藏效果函数有哪些？

show()
hide()
toggle()

2、显示隐藏效果三个函数中参数中的函数参数怎么使用？

其实是动画完成执行的函数

语法：$(selector).show([speed,[easing],[fn]])

fn:在动画完成执行的函数，每个元素执行一次。



29             $('div').hide(500,function(){

30                 alert('动画结束')

31             })


3、$(selector).show([speed,[easing],[fn]])这句话中的三个参数的执行情况是怎么样的？


a、如果没有参数，那就是没有参数


b、如果有参数，第一个参数必须是speed


c、speed的后两个参数easing和fn的地位是一样的，如果同时出现，easing在前fn在后，如果不同时出现，当后两个参数只出现fn的时候，fn前面不需要加东西


29             $('div').hide(500,function(){

30                 alert('动画结束')

31             })


二、jquery动画中的显示隐藏函数有哪些


1、相关知识


显示和隐藏




控制元素的的显示和隐藏是最基本的动画技术。


  • show()显示被选的元素
    

    语法：$(selector).show([speed,[easing],[fn]])
    • 

  • hide()隐藏被选的元素

    语法：$(selector).hide([speed,[easing],[fn]])
    • 

  • toggle()对被选元素进行隐藏和显示的切换

    语法：$(selector).toggle(speed,callback,switch
    • 

  • 参数说明：

    1.speed:三种预定速度之一的字符串("slow","normal",or"fast")或表示动画时长的毫秒数值（如：1000
    

    2.	easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"
    

    3.	fn:在动画完成执行的函数，每个元素执行一次。




 


2、代码




 <!DOCTYPE html>

 <html lang="en">

 <style>

 </style>

 <head>

     <meta charset="UTF-8">

     <title>演示文档</title>

     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>

     <style type="text/css">

     div{width: 150px;height: 150px;border: 1px solid green;display: none;}

       </style>

 </style>

 </head>

 <body>

 <div id="div1"></div><div id="div2"></div><div id="div3"></div>

 <input id="btn1" type="button" value="显示">

 <input id="btn2" type="button" value="隐藏">

 <input id="btn3" type="button" value="切换">

 </body>

 <script>

     $(function(){

         $('#btn1').click(function(){

             //"speed参数:normal(=400),fast(=200),slow(=600)。

             $('#div1').show('slow')

             $('#div2').show(1000)

             $('#div3').show('fast')

         })

         $('#btn2').click(function(){

             $('div').hide(500,function(){

                 alert('动画结束')

             })

         })

         $('#btn3').click(function(){

             $('div').toggle(1000)

         })

     })

 </script>

 </html>




 
												


											
js进阶 13-1 jquery动画中的显示隐藏函数有哪些的更多相关文章
	

    
								
  1. js进阶 13 jquery动画函数有哪些
		
    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...
    
		
    2. 
						
  2. js进阶 11-4/5  jquery中css的类的操作有哪些
		
    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
    
		
    3. 
						
  3. js进阶 13-11/12 jquery如何实现折叠导航
		
    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
    
		
    4. 
						
  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
		
    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
    
		
    5. 
						
  5. js进阶---12-10、jquery绑定事件和解绑事件是什么
		
    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
    
		
    6. 
						
  6. js进阶课程 12-9 jquery的事件对象event的方法有哪些？
		
    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...
    
		
    7. 
						
  7. js进阶---12-12、jquery事件委托怎么使用
		
    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...
    
		
    8. 
						
  8. js进阶 13-9/10 jquery如何实现三级列表
		
    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...
    
		
    9. 
						
  9. jQuery事件-div的显示隐藏及鼠标的移入移出
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 获取个人借阅信息---图书馆client
			
    在上一篇利用jsoup解析个人信息----图书馆client,获得个人基本信息后.便有了进一步的需求:获取当前借阅的具体信息 获取的方法还是一样的.利用jsoup解析借阅信息页面,获得所需数据,封装成 ...
    
			
    2. 
						
  2. ESP8266学习笔记4：ESP8266的SmartConfig
			
    今天花了将近一天的时间来研究ESP8266的SmartConfig功能,这个应该算是wifi云产品的标配.这篇文章先把SmartConfig操作一遍,我还写了还有一篇文章梳理了物理层的详细协议,点击这 ...
    
			
    3. 
						
  3. Virtual Reality: Immersive Yourself In Your 3D Mockup
			
    ESI's Virtual Reality software solution IC.IDO is an exceedingly powerful immersive engineering solu ...
    
			
    4. 
						
  4. 设置select组件中的默认值
			
    会员卡类型   <select id="name2" style="width:140px"> <option value="Ak& ...
    
			
    5. 
						
  5. iOS Core Animation具体解释（四）AutoLayout中的动画
			
    原创blog.转载请注明出处 blog.csdn.net/hello_hwc 欢迎关注我的iOS SDK具体解释专栏 http://blog.csdn.net/column/details/huang ...
    
			
    6. 
						
  6. Android学习笔记之图像颜色处理（ColorMatrix）
			
    对图像进行颜色方面的处理,通过使用颜色矩阵(ColorMatrix)来实现.从而可以达到很多特效如黑白老照片.泛黄旧照片等等. 1.颜色矩阵(ColorMatrix) 这里有详细的介绍:http:// ...
    
			
    7. 
						
  7. Redis学习笔记--Redis客户端（三）
			
    1.Redis客户端 1.1 Redis自带的客户端 (1)启动 启动客户端命令:[root@kwredis bin]# ./redis-cli -h 127.0.0.1 -p 6379 -h:指定访 ...
    
			
    8. 
						
  8. 《Java设计模式》之桥接模式
			
    Bridge模式的概念 Bridge 模式是构造型的设计模式之中的一个.Bridge模式基于类的最小设计原则,通过使用封装,聚合以及继承等行为来让不同的类承担不同的责任.它的主要特点是把抽象(abst ...
    
			
    9. 
						
  9. 从 QSplitter 中移除 QWidget（使用隐藏与显示，切换十分方便，不要真正销毁）
			
    Splitter 的函数中有addWidget,但是却没有removeWidget, 或者delete之类的功能,所以如果想删去或者暂时不显示其中的某些widget就要自己手动完成这个效果.方法一:取 ...
    
			
    10. 
						
  10. .NET Entity Framework入门操作
			
    Entity Framework是微软借鉴ORM思想开发自己的一个ORM框架. ORM就是将数据库表与实体对象(相当于三层中的Model类)相互映射的一种思想. 最大的优点就是非常方便的跨数据库平台. ...
    
			
    11.