<!DOCTYPE html>
<html>
<!--
jQuery效果隐藏和显示
隐藏,显示,切换,滑动,淡入淡出,以及动画,哇偶
jQuery hide()和show()
通过jQuery,您可以使用hide()和show()方法来隐藏和显示HTML元素
语法
$(selector).hide(speed,callback);
$(selector).hide(speed,callback);
可选的spped参数规定隐藏显示的速度,可以取下值:'slow','fast'或毫秒
可选的callback参数是隐藏或显示完成后执行的函数名称
下面演示带spped参数的hide()方法
jQuery toggle()
通过jQuery,您可以使用toggle()方法来切换hide()和show()方法
显示被隐藏的元素,并隐藏已显示的元素
-->
<!-- -->
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$("#hideSpeed").click(function(){
$('.c_p_0').hide(1500);
})
$("#showSpeed").click(function(){
$('.c_p_0').show(1500);
})
$("#hideCallback").click(function(){
$("div").hide(3000, "linear", function(){
alert("Hide() 方法已经完成!");
})
})
// 第二个参数时一个字符串,表示过渡使用那种缓动函数,
//jQuery自身提供了linear(直线),swing(摇摆)
$("#showCallback").click(function(){
$("div").show(3000, "swing", function(){
alert("show()方法已经完成!");
});
});
$("#toggleBtn").click(function(){
$("#p2").toggle();
})
});
</script>
</head>
<body>
<p id="p1">如果你点击"隐藏按钮,我将会消失"</p>
<button id="hide">隐藏按钮</button>
<button id="show">显示按钮</button>
<p class="c_p_0">这是演示speed的行</p>
<p class="c_p_0">这是演示speed的行</p>
<button id="hideSpeed">隐藏速度</button>
<button id="showSpeed">显示速度</button>
<div>隐藏以及设置回调函数隐藏以及设置回调函数隐藏以及设置回调函数隐藏以及设置回调函数</div>
<button id="hideCallback">带样式和回调的隐藏</button>
<button id="showCallback">带样式和回调的显示</button>
<br>
<p id="p2">这是测试toggle()方法</p>
<button id="toggleBtn">隐藏/显示</button>
</body>
</html>
