jQuery第三天动画效果、 jQuery类数组操作小结（初级）

最新推荐文章于 2021-02-04 09:43:32 发布

Web_hao

最新推荐文章于 2021-02-04 09:43:32 发布

阅读量500

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/input_hao/article/details/49648481

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基本显示、隐藏效果
shou()/hide():
作用：通过同时改变元素的宽度和高度来实现显示或者隐藏
用法：$obj.show(执行时间，回调函数);
执行时间:slow,normal,fast或毫秒数
回调函数:动画执行完毕之后要执行的函数

例子：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-显示与隐藏</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		display : none;
	}
  </style>
 </head>
 <body>
  <button>显示</button>
  <button>隐藏</button>
  <br><br>
  <div></div>
  <script>
	$("button:first").click(function(){
		/*
		 * show()方法 - 显示
		 * * show()无参版本 - 不具有动画效果
		 * * show(speed,[callback])有参版本 - 具有

动画效果
		 *   * speed - 设置动画执行的时长,单位为毫

秒
		 *     * 三个预定义值 - slow|normal|fast
		 *   * callback - 当动画执行完毕后的函数
		 */
		$("div").show('slow',function(){
		});
	});
	$("button:last").click(function(){
		/*
		 * hide()方法 - 隐藏
		 * * hide()无参版本 - 不具有动画效果
		 * * hide(speed,callback)有参版本 - 具有动

画效果
		 *   * speed - 设置动画执行的时长,单位为毫

秒
		 *     * 三个预定义值 - slow|normal|fast
		 *   * callback - 当动画执行完毕后的函数
		 */
		$("div").hide(1000,function(){
		});
	});
  </script>
 </body>
</html>

2.滑动式动画效果
slideDown()/slideUp()
作用：通过改变高度来实现显示或者隐藏的效果
用法同show()/hide()
例子：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-滑动效果</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		display : none;
	}
  </style>
 </head>

 <body>
  <button>slideDown</button>
  <button>slideUp</button>
  <br><br>
  <div></div>
  <script>
	$("button:first").click(function(){
		/*
		 * slideDown(speed,callback)方法 - 向下滑

动
		 * * API帮助文档 - 不允许不传递参数的
		 *   * 经过实际测试,可以不传递参数
		 *   * jQuery底层代码,指定默认时长
		 * * 参数
		 *   * speed - 设置动画执行的时长
		 *   * callback - 动画执行完毕后执行的函数
		 */
		$("div").slideDown(3000);
	});
	$("button:last").click(function(){
		$("div").slideUp(3000);
	});
  </script>
 </body>
</html>

3.淡入淡出式动画效果
fadeIn()/fadeOut()
作用：通过改变不透明度opacity来实现显示或者隐藏
用法同show/hide
例子：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-淡入淡出</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		display : none;
	}
  </style>
 </head>
 <body>
  <button>fadeIn</button>
  <button>fadeOut</button>
  <br><br>
  <div></div>
  <script>
	$("button:first").click(function(){
		$("div").fadeIn(3000);
	});
	$("button:last").click(function(){
		$("div").fadeOut(3000);
	});
  </script>
 </body>
</html>

4.创建自定义动画
animate()
用法:animate(js对象，执行时间，回调函数);
js对象：{}描述动画执行之后元素的样式
执行时间:毫秒数
回调函数:动画执行结束后要执行的函数
例子：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-自定义动画一</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		position : relative;
		top : 50px;
		left : 10px;
	}
  </style>
 </head>

 <body>
  <button>执行动画</button>
  <br><br>
  <div></div>
  <script>
	$("button").click(function(){
		/*
		 * animate

(params,duration,easing,callback)
		 * * params - 设置动画执行的样式(CSS的属

性)
		 *   * 写法 - { attrName : attrValue}
		 * * duration - 设置动画执行的时长,单位为毫

秒
		 *   * 三种预定义值 - slow|normal|fast
		 * * easing - 要使用的擦除效果的名称(不使用

)
		 * * callback - 当动画执行完毕后的函数
		 */
		/* 并发效果 - 同时执行
		$("div").animate({
			"width" : 50,
			"height" : 50
		},3000);
		*/
		// 排队效果 - 按照先后顺序执行
		$("div").animate({
			"width" : 50
		},3000).animate({
			"height" : 50
		},3000).animate({
			"left" : 200
		},3000).animate({
			"top" : 200
		},3000);
	});
  </script>
 </body>
</html>

例子2：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-自定义动画二</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		position : relative;
		top : 50px;
		left : 10px;
	}
  </style>
 </head>

 <body>
  <button>执行动画</button>
  <br><br>
  <div></div>
  <script>
	$("button").click(function(){
		/*
		 * animate(params,options)
		 * * params - 设置动画的样式(CSS属性)
		 *   * 写法 - {attrName:attrValue}
		 * * options - 选项
		 *   * 写法 - {name:value}
		 *   * 选项
		 *     * duration - 设置动画执行的时长
		 *     * easing - 要使用的擦除效果的名称
		 *     * complete - 动画执行完毕后的函数
		 *     * queue - 设定为false将使此动画不进

入动画队列 
		 */
		$("div").animate({
			"width" : 50
		},{
			"duration" : 3000
		}).animate({
			"height" : 50
		},{
			"duration" : 3000,
			"queue" : false
		});
	});
  </script>
 </body>
</html>

切换例子：

<!DOCTYPE html>
<html>
 <head>
  <title>jQuery动画效果-切换动画</title>
  <meta charset="utf-8" />
  <script src="scripts/jquery-1.11.3.js"></script>
  <style>
	div {
		width : 200px;
		height : 200px;
		border : solid 1px black;
		background : pink;
		position : relative;
		top : 50px;
		left : 10px;
	}
  </style>
 </head>

 <body>
  <button>执行动画</button>
  <br><br>
  <div></div>
  <script>
	$("button").click(function(){
		/*
		 * toggle(speed,callback)
		 * * speed - 设置动画执行的时长,单位为毫秒 
		 */
		//$("div").toggle(3000);
		//$("div").slideToggle(3000);
		/*
		 * fadeTo(speed,opacity,callback)
		 * * speed - 设置动画执行的时长,单位为毫秒
		 * * opacity - 设置当前元素的透明度(0-1)
		 *   * 0 - 透明
		 *   * 1 - 不透明
		 */
		$("div").fadeTo(3000,0.5);
	});

	function move(){
		$("div").slideToggle(3000,function(){
			move();
		});
	}
	move();
  </script>
 </body>
</html>

Web_hao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery第三天动画效果、 jQuery类数组操作小结（初级）

1.基本显示、隐藏效果shou()/hide():作用：通过同时改变元素的宽度和高度来实现显示或者隐藏用法：$obj.show(执行时间，回调函数);执行时间:slow,normal,fast或毫秒数回调函数:动画执行完毕之后要执行的函数例子： jQuery动画效果-显示与隐藏 div { width : 200px; height
复制链接

扫一扫