jQuery 效果:
对应$(selector).action()的后半部分。
隐藏、显示、切换,滑动,淡入淡出,以及动画
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#yincang").click(function(){
$("p#id").hide(1000,function(){alert('bye')});
});
});
$(document).ready(function(){
$("button#xian").click(function(){
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button#yincang").click(function(){
$("p#id").hide(1000,function(){alert('bye')});
});
});
$(document).ready(function(){
$("button#xian").click(function(){
$("p#id").show(function(){1000,alert('hello')});
});
});
</script>
</head>
<body>
<button type="button" id='xian'>显示</button>
<button type="button" id='yincang'>隐藏</button>
<p id="id">这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
});
</script>
</head>
<body>
<button type="button" id='xian'>显示</button>
<button type="button" id='yincang'>隐藏</button>
<p id="id">这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>