在jquery中我显示与隐藏元素可以直接使用show()和hide()来操作,这比起js中的操作要方便了,同时show()和hide()还可以 设置参数让我们的运行有个缓存效果
首先来看个段落文字的显示和隐藏
1:show() 方法
显示出隐藏的
元素。代码如下:
$(".btn2").click(function(){
$("p").show();
});
2:hide()隐藏可见的
元素:代码如下:
$(".btn1").click(function(){
$("p").hide();
});
3:jQuery代码如下:
$("element").show("slow");
运行该代码后,元素将在600毫秒内慢慢的显示出来。其它的速度关键字还有”normal“和”fast“(长度分别是400毫秒和200毫秒)。
不仅如此,还可以为显示速度指定一个数字,单位是毫秒。
例如,使用如下代码使元素在1秒钟(1000毫秒)内显示出来;
$(”element").show(1000);在前面的例子中,把其中的hide()方法改为hide(600),show()方法改为show(600)。
jQuery代码如下:
$(function () {
$("#panel h5.head").toggle(function () {
$(this).next().hide(600);
}, function () {
$(this).next().show(600);
})
});
从代码的执行过程中,可以发现,hide(600)方法会同时减少“内容”的高度、宽度和不透明度,直至3个属性的值为0,最后设置该元素的CSS规则为“display:none”。
然后我们再来看个简单的代码:
This is a paragraph.
show, hide 都有 callback 函数,callback 就是在一个动作完成之后【再】执行的函数
$("#divB").hide(500, function() {
$("#divA").hide();
});
$(b).hide(500,function(){
$(a).hide();
})
需要用animate自定义动画