我们之前讲到了hide()的用法,今天来加深理解一下,与hide()与之对应的就是show()函数了,一个是隐藏,一个是显示。它们的原型语法是:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
当然,初学者可能觉得看这个语法会有点复杂,其实这两个函数,hide()和show()里面,可以不填任何的参数在里面,也能达到隐藏和显示的效果。我们先来讲一下第一个参数,speed,里面可以填写一个数字,代表显示或者隐藏要在多少ms(毫秒)完成,也就是说我们填$("div").hide(1000);那么所有的div标签都会在1秒都隐藏起来;speed里也可以不填写数字,有两个字符串可以填写,一个是“fast”,另一个是“slow”,至于不填就是介于这两者之间了。callback我们称它为回调函数,作用是当hide()或者show()执行完毕后,所调用的一个function,也就是说可以这样写:
$("div").hide("fast",function(){ // 函数要进行的操作 });
这样子讲,是不是清楚了点。接下来我们来看个例子把:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#hide_p").click(function(){
$("p").hide(1000,function(){alert("hide完成")});
});
$("#show_p").click(function(){
$("p").show(2000);
});
});
</script>
</head>
<body>
<p>这是p元素标签</p>
<button id="hide_p">隐藏</button>
<button id="show_p">显示</button>
</body>
</html>
这个代码,大家可以复制,去实践一下啊,通过点击隐藏button,<p>这是p元素标签</p>将会隐藏起来,当它完全隐藏后,系统就会输出一个对话框给你,告诉你hide完成;当你点击了显示的时候,它会用2秒显示完成。
接下来讲一个与show()和hide()都有关系的函数toggle(),这是个什么函数呢,大家想一下,我们一般控制一个物体运行和停止的时候,是不是都是用的同一个按钮,点一下运行,再点一下停止,toggle()函数就是这个按钮啦,一个按钮实现显示/隐藏两个功能。函数的语法:
$(selector).toggle(speed,callback);
也是和hide(),show()一样的语法结构,可传可不传啦。接下来我们看一个例子咯,大家也动手做一做,光看没有用滴,只需要一个按钮实现来回切换:(大家也可以尝试着把js代码放进js文件,在html页面去引用它,因为这样写更加的规范,我这里为了方便大家观看,就放在一起啦,不会滴童鞋可以看)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggle();
});
});
</script>
</head>
<body>
<div>这是一个div</div>
<button>隐藏/显示</button>
</body>
</html>
咳咳,接下来呢讲一个效果和hide(),show()类似的函数,不同的是hide()和show()是非常僵硬的隐藏和显示,而我要讲的fadeIn()和fadeOut()则是淡入/淡出,fadeIn()是淡入,例如div标签原本是隐藏的,但是使用了fadeIn这个函数后,它就会慢慢的从浅到深显示出来,而fadeOut就是隐藏了,从一开始慢慢的淡去,直到消失不见,我们来看看它的语法:
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
震惊!竟然和hide()和show()一样的语法结构哦,学起来也很简单呢,那么我们直接放一个例子,大家更改里面的参数,自己玩会,哦不,学习会~:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(2000);
});
$("#btn2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(2000);
});
});
</script>
</head>
<body>
<button id="btn1">点击淡入 div </button>
<button id="btn2">点击淡出 div </button>
<hr>
<div id="div1" style="width:100px;height:100px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:100px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:100px;height:100px;display:none;background-color:blue;"></div>
</body>
</html>
可能很多童鞋就会想哩,那有没有一个按钮实现淡入/淡出哇,肯定有啊,fadeToggle()这个函数,和刚刚那个很像吧,toggle默认是直接显示/隐藏,而这个加上了fade,就是淡入/淡出的切换咯,语法结构也是一样的:
$(selector).fadeToggle(speed,callback);
好的,直接上个代码,来实践下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").fadeToggle();
});
});
</script>
</head>
<body>
<button>淡出/淡入</button>
<br><br>
<div style="width:100px;height:100px;background-color:blue;"></div>
</body>
</html>
大家一定要去试试哦,最好自己去编写下,试试各种参数,例如fast,slow,或者输入毫秒,看每一个div消失的快慢,加深理解。好的,现在已经讲到如何淡入和淡出了,那么可不可以让他淡化到一定的程度显示呢,有的图片的确会淡化一些会好看一点,jQuery当然也提供了这种方法让你的元素按照一定的透明度显示出来,fadeTo()这个函数,语法结构会比原来的多一个opacity,用来控制透明度,数值介于0-1之间,越小透明度越高。
$(selector).fadeTo(speed,opacity,callback);
接下来奉上实践代码给各位大哥,实践,实践,实践,重要的话说三次:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("fast",0.7);
});
});
</script>
</head>
<body>
<button>点我变淡</button>
<br><br>
<div id="div1" style="width:100px;height:100px;background-color:red;"></div><br>
<div id="div2" style="width:100px;height:100px;background-color:green;"></div><br>
</body>
</html>