jQuery show()とhide()の例
jQueryのshow()とhide()が最もよく使用されるエフェクトです。
-
show() – 一致する要素を表示します.
-
hide() – 一致する要素を非表示にします.
どちらの方法も、パラメータとしてのサポート時間(slow、fast、またはexact milliseconds)です。このパラメーターを省略すると、デフォルトの400ミリ秒が適用されます。
自分で試してみてください
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
p{
padding:8px;
margin:16px;
border:1px solid blue;
width:250px;
height:50px;
background-color:#999999;
color:white;
}
</style>
</head>
<body>
<h1>jQuery show() and hide() example</h1>
<p>Hello, this show() and hide() example</p>
<button id=show>show()</button>
<button id=hide>hide()</button>
<button id=reset>Reset</button>
<script type="text/javascript">
$("#show").click(function () {
$("p").show('fast');
});
$("#hide").click(function () {
$("p").hide(1000);
});
$("#reset").click(function(){
location.reload();
});
</script>
</body>
</html>