jquery show()和hide()让元素动起来

来源:转载

在jquery中我显示与隐藏元素可以直接使用show()和hide()来操作,这比起js中的操作要方便了,同时show()和hide()还可以设置参数让我们的运行有个缓存效果,下面我来给大家介绍。

基本用法

show() 方法

显示出隐藏的 <p> 元素。

 代码如下 复制代码

$(".btn2").click(function(){

  $("p").show();

});

hide()隐藏可见的 <p> 元素:

 代码如下 复制代码

$(".btn1").click(function(){

  $("p").hide();

});

让元素动起来

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”。


show/hide性能测试

测试数据

用作测试的是一个含有100个div的HTML页面,div带有class和一些内容

用作测试的jQuery版本是1.4.2,所以测试结果也只是针对这个版本,在其他版本可能就不是这些结果了。
测试的jQuery方法分别是:

.toggle()
.show() 和 .hide()
.css({'display':'none'}) 和 .css({'display':'block'})
.addClass('hide') 和 .removeClass('hide')

改变<style>元素的一个属性

.show() 和 .hide()


在所有浏览器中,这两个方法在隐藏DOM元素上相对来说比较慢。主要原因在于.hide()方法必须先保存元素的"display"属性,这样.show()才能把元素恢复到原来的状态。这里用到了.data()这个jQuery方法,把信息保存在DOM元素上。为了达到这个目的,.hide()在每个元素上循环了两次,一次用来保存当前的"display"值,一次用来更新样式"display"为"none"。根据源代码上的注释,这样做是为了防止浏览器在每个循环上进行重新渲染(reflow)。.hide()方法还会检查你是否传递了使用动画效果的参数,就算传入一个"0"也会让性能大打折扣。在第一次调用.hide()的时候性能最慢,在之后再调用则会变快。

Browser hide/show
FireFox 3.6 29ms / 10ms
Safari 4.05 6ms / 1ms
Opera 10.10 9ms / 1ms
Chrome 5.0.3 5ms / 1ms
IE 6.0 31ms / 16ms
IE 7.0 15ms / 16ms


.toggle()


这个方法是最慢的。它会检查选择器返回的每一个元素当前是否可见,如果可见的话就调用.hide()方法,不可见则调用.show()方法。不但如此,它不仅会检查你是否传递了一个boolean值进去阻止.hide()或者.show()的执行,还会检查看你是否传入了function来进行切换(toggle)而不是对可见性进行切换。看起来这个方法还有很大的改善空间,例如可以先一次过把隐藏的元素select出来,然后调用.show()方法,同时把其余的元素select出来调用.hide()方法。

Browser hide/show

FireFox 3.6 80ms / 59ms
Safari 4.05 24ms / 30ms
Opera 10.10 67ms / 201ms
Chrome 5.0.3 55ms / 20ms
IE 6.0 296ms / 78ms
IE 7.0 328ms / 47ms




分享给朋友:
您可能感兴趣的文章:
随机阅读: