Javascript这样调用show(),出不来效果,要怎么调用show()方法?

JavaScript015

Javascript这样调用show(),出不来效果,要怎么调用show()方法?,第1张

var Obj = function(arr){

this.show = function(){

alert(arr.name)

}

}

function aaa(){

var o = new Obj({

name:"aaa",

sex:"man"

})

o.show()

}

通过调整对象的CSS样式来实现,简单显示和隐藏可以直接设置display属性。

function hide(objid){

    document.getElementById(objid).style.display="none"

}

function show(objid){

    document.getElementById(objid).style.display="block"

}

如果要实现动态效果,例如淡出隐藏,就需要些更复杂的函数,来设定时间和alpha属性,或者配合样式表用CSS3动画来实现。

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

首先来看个段落文字的显示和隐藏

1:show() 方法

显示出隐藏的 <p>元素。代码如下:

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

$("p").show()

})

2:hide()隐藏可见的 <p>元素:代码如下:

$(".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”。

然后我们再来看个简单的代码:

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

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

$("p").hide()

})

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

$("p").show()

})

})

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Hide</button>

<button class="btn2">Show</button>

</body>

</html>

这个就是超简单的显示与隐藏了,如果要有效果我们只要在hide或show中带时间或参数即可:

代码如下:

<script type="text/javascript">

$(document).ready(function(){

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

$("p").hide(1000)

})

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

$("p").show(1000)

})

})

</script>