一步一步学习 JQuery (八) JQuery 的动画效果

浏览数：126 / 时间：2015年06月09日

常用方法

hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);

show(): 将元素的 display 样式改为先前的显示状态.

以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来.

以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.

fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadeIn() 则相反.

slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.

toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.

slideToggle(): 通过高度变化来切换匹配元素的可见性.

fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
	
		<script type="text/javascript">
			//演示动画效果: show() 和 hide() 方法中传入毫秒数以达到动画的效果
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").show(1000);
				}, function(){
					$(".content").hide(1000);
				});
			})
			*/
			
			//只改变高度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").slideDown(500);
				}, function(){
					$(".content").slideUp(500);
				});
			})
			*/
			
			//只改变透明度
			/*
			$(function(){ 
				$(".head").toggle(function(){
					$(".content").fadeIn(1000);
				}, function(){
					$(".content").fadeOut(1000);
				});
			})
			*/
			
			//toggle() 可以切换元素的可见状态. 
			//slideToggle(): 通过高度变化来切换匹配元素的可见性
			//fadeToggle(): 通过透明度来切换元素的可见性.
			
			/* $(function(){ 
				$(".content").show();
				
				$(".head").click(function(){
					//$(".content").toggle();
					$(".content").slideToggle();
					//$(".content").fadeToggle();

				}); */
				//fadeTo(): 把不透明度以渐近的方式调整到指定的值 (0 – 1 之间). 几乎不怎么用
				//疯狂点击颜色变淡
				 $(function(){ 
					$(".content").show();
					var i = 1; 
					
					$(".head").click(function(){
						
						 $(".content").fadeTo("slow", i);
						i = i - 0.1; 
					}); 
			})
		</script>
	
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
			</div>
		</div>
	</body>
</html>
</span>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

一步一步学习 JQuery (八) JQuery 的动画效果