jQuery--效果

基本(通过改变元素的高度和宽度来进行显示和隐藏)
  show(speed,fn)显示
    参数一:speed速度
    参数二:回调函数。动画效果完成之后回调函数
  hide()隐藏
  toggle()切换
滑动(通过改变元素的高度来进行显示或隐藏)
  slideDown()显示
  slideUp()隐藏
  slideToggle()切换。参数同上
淡入淡出(通过改变元素透明度进行显示或隐藏)
  fadeIn()
  fadeOut()
  fadeTo(speed,opacity,fn)
    参数二:opacity透明度,0~1之间

2.代码实例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		
		div{
			border:1px solid #000;
			width:100px;
			height:100px;
		}
	</style>
	<!-- 导入js库 ,注意:使用src属性之后,标签体中不能写入内容-->
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			$("#b1").click(function(){
				$("#b1Div").toggle("1000");
			});
			$("#b2").click(function(){
				$("#b2Div").slideToggle("slow");
			});
			$("#b3").click(function(){
				$("#b3Div").fadeToggle("slow");
			});
		});
		
	</script>
</head>
<body>
	<input type="button"  />
	<div ></div> <br/>
	<input type="button" />
	<div ></div> <br/>
	<input type="button" />
	<div ></div>
		
</body>
</html>

  

相关文章: