jquery-show()-显示和隐藏

原创 2012年03月27日 19:10:48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>显示和隐藏</title>
<script src="../jquery/jquery-1.7.1.js"></script>
<script>
$(document).ready(function (){
//利用toggle方法实现显示和隐藏
$('#btn0').toggle(function (){
		//先隐藏掉
		$('p').hide('slow');
		},function(){
	//再显示出来
		$('p').show('slow');
			
	});
	
//利用toggle方法实现淡入淡出
$('#btn1').toggle(function (){
		//先隐藏掉
		$('p').fadeIn('slow');
		},function(){
	//再显示出来
		$('p').fadeOut('slow');
			
	});
$('#btn1').toggle(function (){
		//先隐藏掉
		$('img').fadeIn('slow');
		},function(){
	//再显示出来
		$('img').fadeOut('slow');
			
	});
$('#btn2').toggle(function (){
		//先隐藏掉
		$('img').fadeTo('slow',0.66);
		},function(){
	//再显示出来
		$('img').fadeTo('slow',0.22);
			
	});
});
</script>

</head>

<body>
<p>我是李楠!!</p>
<p>我是李楠!!</p>
<p>我是李楠!!</p>
<img width="200px" height="200px" src="file:///D|/Program Files/wamp/www/2012/jQuery/images/12926034201734018.jpg">
<input type="button" id="btn0" value="显示/隐藏" />
<input type="button" id="btn1" value="淡入/淡出" />
<input type="button" id="btn2" value="淡入/淡出 效果 透明度0.66" />
</body>
</html>

jQuery的隐藏显示hide(),show()方法

以前我们在js中如果要隐藏显示一个元素我们需要利用display等于none来设置并且还没有效果,现在在jquery中有了hide();我们可以利用hide()方法来操作,希望本文章给大家所有帮助。 ...

safari 中jQuery 第一次show没有显示

safari 中jQuery 第一次show没有显示 环境:MacBook Safari版本: 重现bug点击事件中动态地在body节点插入一个div,并且div的样式中设置: displ...

js中标签的显示与隐藏操作hide&show

某些文字和kongija     pageEncoding="utf-8"%> 显示隐藏标签 function popDIV(id){ if("no...

让Oracle的 SHOW PARAMETER 命令显示隐藏参数

Find internal of "show parameter" by session tracing SQL> select * from v$version;      ...

页面内容的隐藏和显示-hide()方法和show()方法

有些时候我们需要在一个页面中不刷新页面直接隐藏和显示部分信息,这个时候我们可以使用hide()方法和show()方法。 hide()方法: 描述:使用自定义效果来隐藏匹配的元素。 show()方法: ...

jquery slide show 轮播示例

  • 2014年06月27日 13:54
  • 283KB
  • 下载

JQuery的可见性选择器与show、hide的关系

1.:hidden选择器 不是指"visibility: hidden",而是指"display: none"。2.:visible选择器不是指"visibility: visible",而是指dis...

JQuery slide show using Nano Gallery

  • 2014年07月05日 12:08
  • 549KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery-show()-显示和隐藏
举报原因:
原因补充:

(最多只允许输入30个字)