.hide()
站在用户的角度思考问题,与客户深入沟通,找到海棠网站设计与海棠网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、网站建设、企业官网、英文网站、手机端网站、网站推广、域名与空间、虚拟主机、企业邮箱。业务覆盖海棠地区。
这个方法不接受任何参数。
.hide(
[duration
]
[,
complete
]
)
duration
(默认:
400)
类型:
Number
or
String
一个字符串或者数字决定动画将运行多久。
complete
类型:
Function()
在动画完成时执行的函数。
如果没有参数,.hide()方法是最简单的方法来隐藏一个元素:
$('.target').hide();
匹配的元素将被立即隐藏,没有动画。这大致相当于调用.css('display',
'none'),但display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。如果一个元素的display属性值为inline,那么隐藏再显示时,这个元素将再次显示inline。
Html代码:
复制代码
代码如下:
div
class="topicList"
h3span学习天地/span/h3
ul
li1111111111/li
li2222222222/li
li333333333/li
li4444444444/li
li5555555555/li
li6666666666/li
/ul
/div
Jquery代码:
第一种实现方式:
复制代码
代码如下:
1.
script
type="text/javascript"
$(function(){
$(".topicList
h3").click(function(){
var
UL
=
$(this).next("ul");
if(UL.css("display")=="none"){
UL.css("display","block");
}
else{
UL.css("display","none");
}
});
});
/script
第二种实现方式:
复制代码
代码如下:
2.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(function(){
$(this).next("ul").hide(1000);
},function(){
$(this).next("ul").show(1000);
});
});
/script
第三种实现方式:
可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果,由于两个方法相似,可以直接使用toggle来完成。
复制代码
代码如下:
3.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(function(){
$(this).next("ul").css("display","none");
},function(){
$(this).next("ul").css("display","block");
});
});
/script
第四种实现方式:
toggle如果有两个参数,并且都是函数,表示第一次点击执行第一个函数,第二次点击执行第二个函数。
复制代码
代码如下:
4.
script
type="text/javascript"
$(function(){
$(".topicList
h3").toggle(topicHandler,topicHandler);
function
topicHandler(){
//使用fadeIn、show、slideDown可以完成某个容器的显示
//使用fadeOut、hide、slideUp可以完成某个容器的隐藏
//所以可以通过各个的toggle来完成两个之间的轮换
$(this).next("ul").toggle(1000);
}
});
/script
jQuery 效果 - 隐藏和显示
jQuery hide() 和 show()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
$("button").click(function(){ $("p").hide(1000);});
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
实例
$("button").click(function(){ $("p").toggle();});
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。