jQuery 中的动画

最新推荐文章于 2022-12-13 13:43:21 发布

aimartt

最新推荐文章于 2022-12-13 13:43:21 发布

阅读量1.3k

点赞数

分类专栏： jQuery 文章标签： jquery function html string path border

本文链接：https://blog.csdn.net/aimartt/article/details/7864424

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

jQuery 中的动画

参考资料：
《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社

1、show() 和 hide() 方法

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
				$("#head").hover(function() {
					$("#content").show("fast");
				}, function() {
					$("#content").hide("normal");
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			#panel {width: 500px; border: 1px solid;}
			#head {background: yellow;}
			.content {display: none;}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div id="panel">
  			<div id="head">什么是黄襟蛱蝶？</div>
  			<div id="content" class="content">
  				（该内容来自维基百科）黄襟蛱蝶是蛱蝶科下的一种蝴蝶，主要分布在南亚和东南亚地区。
  				上半部为赭黄色。前翅有一些圆形的，细长的暗色印记，
  				一条宽且有点弯曲的横向黄色条纹从肋脉到第一翅脉，不过没有延伸到翅膀末端，
  				条纹的后端变宽，边缘不规则，朝里为黑色，在间隙3和间隙4突出，间隙2内凹，间隙1外凸。
  				黄色条纹上有3个呈弧状排列的黑色圆点，分别位于间隙1、2和3，最下方最大。
  			</div>
  		</div>
  	</body>
</html>

□ 若不指定参数，则元素会立即显示或隐藏，无动画效果。

2、fadeIn() 和 fadeOut() 方法

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，淡入内容；当鼠标离开标题时，淡出内容。
		$("#head").hover(function() {
			$("#content").fadeIn("slow");
		}, function() {
			$("#content").fadeOut(2000);
		});
	});
</script>

□ 两个方法只改变元素的不透明度。

3、slideUp() 和 slideDown() 方法

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，向下滑动显示内容；当鼠标离开标题时，向上滑动隐藏内容。
		$("#head").hover(function() {
			$("#content").slideDown("normal");
		}, function() {
			$("#content").slideUp(1000);
		});
	});
</script>

□ 两个方法只改变元素的高度。

jQuery 中的任何动画效果都可以指定3种速度关键字（"slow"、"normal" 和 "fast"），分别代表时间长度（200ms、400ms 和 600ms）。当使用关键字时需要加上引号，如：slideDown("normal")，用数字作为参数时则不加引号，如：slideUp(1000)。

4、animate( params,[speed],[easing],[fn]) 方法

params：一组包含作为动画属性和终值的样式属性和及其值的集合；
speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)；
easing：要使用的擦除效果的名称(需要插件支持)。默认 jQuery 提供 "linear" 和 "swing"；
fn：在动画完成时执行的函数，每个元素执行一次。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	  	<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function() {
				//为 Id 为 panel 的元素绑定 click 事件
				$("#panel").click(function() {
					//元素在 3 秒内向右移动 333 像素
					$(this).animate({left: "333px"}, 3000);
				});
			});
		</script>  	
		
		<!-- CSS -->
		<style type="text/css">
			#panel {
				position: relative;
				height: 100px;
				width: 100px;
				border: 1px solid #96e555;
				background: #b17af5;
				cursor: pointer;
			}
		</style>
  	</head>
  
  	<!-- HTML -->
  	<body>
  		<div id="panel"></div>
  	</body>
</html>

动画效果还可以累加和累减，在属性值前添加 "+=" 或 "-="。如：

<script type="text/javascript">
	$(function() {
		//为 Id 为 panel 的元素绑定 click 事件
		$("#panel").click(function() {
			//每次触发元素的 click 事件时，元素在 3 秒内向右移动 333 像素
			$(this).animate({left: "+=333px"}, 3000);
		});
	});
</script>

还可以同时设置多个动画动作。如：

<script type="text/javascript">
	$(function() {
		//为 Id 为 panel 的元素绑定 click 事件
		$("#panel").click(function() {
			//元素在 3 秒内向右移动 333 像素，同时向下移动 222 像素
			$(this).animate({left: "333px", top: "222px"}, 3000);
		});
	});
</script>

若不想让动画同时进行，只需拆分代码即可。如：

<script type="text/javascript">
	$(function() {
		//为 Id 为 panel 的元素绑定 click 事件
		$("#panel").click(function() {
			//元素先用 3 秒时间向右移动 333 像素，再用 3 秒时间向下移动 222 像素。
			$(this).animate({left: "333px"}, 3000).animate({top: "222px"}, 3000);
		});
	});
</script>

如果需要在动画执行完后执行某些工作，此时可以使用回调函数来完成。如：

<script type="text/javascript">
	$(function() {
		//为 Id 为 panel 的元素绑定 click 事件
		$("#panel").click(function() {
			//元素先用 3 秒时间向右移动 333 像素，再用 3 秒时间向下移动 222 像素，最后改变元素的样式。
			$(this).animate({left: "333px"}, 3000).animate({top: "222px"}, 3000, function() {
				$(this).css("border", "5px solid blue");
			});
		});
	});
</script>

5、stop() 方法

当调用 stop() 方法时，会停止当前执行的动画，并从当前状态开始，执行动画队列中的下一个动画。
如：当鼠标多次快速移入和移出标题元素时，不会再像前面的操作一样，产生等待动画执行的效果了：

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").stop().fadeIn("slow");
		}, function() {
			$("#content").stop().fadeOut("slow");
		});
	});
</script>

6、toggle() 方法

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").stop().toggle("slow");
		});
	});
</script>

执行动画的元素会在 show() 和 hide() 方法之间切换。

7、slideToggle() 方法

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").stop().slideToggle("slow");
		});
	});
</script>

执行动画的元素会在 slideUp() 和 slideDown() 方法之间切换。

8、fadeToggle() 方法

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").stop().fadeToggle("slow");
		});
	});
</script>

执行动画的元素会在 fadeIn() 和 fadeOut() 方法之间切换。

8、fadeTo() 方法：将元素的不透明度渐进到指定的值

<script type="text/javascript">
	$(function() {
		//当鼠标滑到标题上时，以 30% 的不透明度显示内容；当鼠标离开标题时，隐藏内容。
		$("#head").hover(function() {
			$("#content").stop().fadeTo("slow", 0.3);
		}, function() {
			$("#content").stop().fadeOut("slow");
		});
	});
</script>

aimartt

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery 中的动画

jQuery 中的动画参考资料：《锋利的jQuery》作者：单东林张晓菲魏然出版社: 人民邮电出版社1、show() 和 hide() 方法<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerNam
复制链接

扫一扫

专栏目录