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. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  3. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

  4. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  5. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  6. js进阶课程 12-9 jquery的事件对象event的方法有哪些?

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

  7. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

  8. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

  9. jQuery事件-div的显示隐藏及鼠标的移入移出

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. mysql_jdbc

    package com.lovo.day18_jdbc1; import java.sql.Connection; import java.sql.DriverManager; import java ...

  2. Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...

  3. eclipse工作空间配置导出

    由于工作与学习的需求,需要使用不同的工作空间.而eclipse的新建工作空间其他以前的配置都没有继承过来,那么就得重新配置一遍. 经过学习其他前辈们的经验与自己的摸索总结一下3种方法: 方法一:使用e ...

  4. [BZOJ4555 TJOI2016 HEOI2016 求和]

    ​ 第一篇博客,请大家多多关照.(鞠躬 BZOJ4555 TJOI2016 HEOI2016 求和 题意: ​ 给定一个正整数\(n\)(\(1\leqq n \leqq100000\)),求: \[ ...

  5. hdu 6170

    dp: http://blog.csdn.net/qq_28954601/article/details/77484676 #include <bits/stdc++.h> #define ...

  6. 【2017 Multi-University Training Contest - Team 2】 Regular polygon

    [Link]: [Description] 给你n个点整数点; 问你这n个点,能够组成多少个正多边形 [Solution] 整点只能构成正四边形. 则先把所有的边预处理出来; 枚举每某两条边为对角线的 ...

  7. 注意string的insert函数的几种形式

    string (1) string& insert (size_t pos, const string& str); substring (2) string& insert ...

  8. java初探秘之推断输入的一串字符是否全为小写字母

    import java.io.IOException; import java.util.*; public class Two { public static void main(String[] ...

  9. Java IO:SocketChannel和Selector在ZooKeeper中应用

    转载请注明出处:jiq•钦's technical Blog 假设不了解SocketChannel和Selector.请先阅读我的还有一篇博文:点击打开链接 ZooKeeper的启动从QuorumPe ...

  10. jquery constructor(null)

    <!-- jQuery = function() { --> <!-- return new jQuery.fn.F(); --> <!-- }, --> < ...