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

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>
 
上一篇:java.lang.IllegalArgumentException: Result Maps collection already contains value for xxx


下一篇:2.5美元每月的VPS, host1plus