一、hide()和show()
hide()用来隐藏HTML元素。
show()用来显示HTML元素。
以上两个方法都有两个参数,第一个是变化时间,即显示或者隐藏的时间,第二个参数是动画完成后的回调函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: yellow;
}
</style>
<script>
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
$(".showbtn").click(function(){
$("div").show(1000,"linear",function(){
alert("Show() 方法已完成!");
});
});
});
</script>
</head>
<body>
<div>隐藏和显示及设置回调函数</div>
<button class="hidebtn">隐藏</button>
<button class="showbtn">显示</button>
</body>
</html>
二、toggle()
toggle()可以用来切换hide()和show(0方法。
<!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(){
$("p").toggle(1000,getfun());
});
function getfun(){
alert("执行完毕!");
}
});
</script>
</head>
<body>
<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>
重点来了:
关于toggle()的第二个参数。
1、如果方法不加括号,则会先执行动画效果,然后有几个元素就会执行几遍方法。
2、如果加括号,则会先执行函数,且只执行一次,然后执行动画效果。
3、如果直接在第二个参数上写方法,效果则和第一种相同。
1、
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,getfun);
});
function getfun(){
alert("执行完毕!");
}
});
</script>
2、
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,function(){
alert("执行完毕!");
});
});
});
</script>
//以上两种效果相同,都是先执行动画,后alert(),且都alert()两遍。
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle(1000,getfun());
});
function getfun(){
alert("执行完毕!");
}
});
</script>
//此情况是先执行函数,且只执行一次,然后执行动画。