5. jQuery 效果 - 隐藏和显示

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){$("p").hide();
});$("#show").click(function(){$("p").show();
});

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>

语法：

$(selector).hide(speed,callback);$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法：
实例

$("button").click(function(){$("p").hide(1000);
});

<html>
<head>
<meta charset="utf-8"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){$("p").hide(1000);});});</script></head><body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body></html>

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
实例

$("button").click(function(){$("p").toggle();
});

语法：

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

5. jQuery 效果 - 隐藏和显示相关推荐

jQuery 效果- 隐藏和显示
jQuery 效果- 隐藏和显示实例 jQuery hide() 简单的jQuery hide()方法演示. <!DOCTYPE html> <html> <head& ...
jQuery效果-隐藏和显示
jQuery效果-隐藏和显示使用jQuery能够轻易地实现各种动画效果,包括隐藏.显示.切换.滑动等 hide()方法和show()方法通过jQuery,可以使用hide()和show()方法来隐 ...
jquery的隐藏和显示
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素 $(selector).hide(speed,callback); $(selector).show(speed,callbac ...
用jQuery设置隐藏和显示
先看代码: HTML css JQ 首先解释css @keyframes规则用来创建动画. 下面的百分几是动画的进度,可有设置什么进度的时候写入什么样式,动画到什么进度的是就会显示什么样式. tran ...
jQuery按钮隐藏与显示
$("#btn").attr("style", "display:none;"); //隐藏 $("#btn").att ...
html 滚动隐藏导航,[jQuery]滚动隐藏或显示顶部导航菜单
现在大部分导航菜单在顶部的网站都会采用固定的形式,不管页面怎么滚动,菜单始终会固定在顶部. 而下面这个方法比较灵活,当你向下滚动页面时,导航菜单是不固定的,当你向上滚动时导航菜单就会显示出来了.这个 ...
jQuery效果：隐藏、显示、切换、滑动、淡入淡出、动画
jQuery效果隐藏.显示.切换.滑动.淡入淡出.以及动画1.隐藏与显示(改变:display:none;) hide()--隐藏 show()--显示toggle()方法:可以使用它来切换hide ...
jQuery实现元素的隐藏和显示
一.jQuery 效果-隐藏和显示 1.jQuery hide()和show() $("#hide").click(function(){//hide可带参数也可不带,表示指定时间 ...
jQuery 效果 - 淡入淡出
效果附上: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
jQuery -- 光阴似箭（二）：jQuery效果的使用
jQuery -- 知识点回顾篇(二):jQuery效果的使用 1. jQuery 效果 -- 隐藏和显示: 使用 hide() 和 show() 方法来隐藏和显示 HTML 元素. <!DO ...

5. jQuery 效果 - 隐藏和显示

5. jQuery 效果 - 隐藏和显示相关推荐

最新文章

热门文章