jQuery隐藏和显示的效果如何使用
1、隐藏:hide()
显示:show()
测试示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#msg").hide();
});
$("#show").click(function(){
$("#msg").show();
});
});
</script>
</head>
<body>
<p id="msg">测试隐藏和显示
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>
点击隐藏按钮，默认显示的信息会隐藏起来。再次点击显示会重新显示出来。
2、隐藏:hide()，显示:show()
还可以传一个参数，指定隐藏/显示的速度，"slow"、"fast" 或毫秒
$(document).ready(function(){
$("#hide").click(function(){
$("#msg").hide(3000);
});
$("#show").click(function(){
$("#msg").show("slow");
});
});
传入的时间参数越大，则显示或隐藏的速度就越慢
3、隐藏:hide()，显示:show()
除了可以传一个显示或隐藏速度的参数，还可以传一个回调函数
$(document).ready(function(){
$("#hide").click(function(){
$("#msg").hide(3000, function(){
console.log("hide callback");
});
});
$("#show").click(function(){
$("#msg").show("slow", function(){
console.log("show callback");
});
});
});
4、jQuery还提供了一个toggle()方法，用来切换隐藏和显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-2.0.3.js"></script>
<script>
$(document).ready(function(){
$("#hideOrShow").click(function(){
$("#msg").toggle();
});
});
</script>
</head>
<body>
<p id="msg">测试toggle隐藏和显示
<button id="hideOrShow">隐藏/显示</button>
</body>
</html>
5、和hide()和show()方法一样
toggle()方法同样还可以传一个参数，指定隐藏/显示的速度，"slow"、"fast" 或毫秒
$(document).ready(function(){
$("#hideOrShow").click(function(){
$("#msg").toggle(3000);
});
});
6、和hide()和show()方法一样
toggle()方法同样除了可以传一个显示或隐藏速度的参数，还可以传一个回调函数
$(document).ready(function(){
$("#hideOrShow").click(function(){
$("#msg").toggle(3000, function(){
console.log("toggle callback");
});
});
});
