jQuery animate()

最新推荐文章于 2023-12-18 10:35:42 发布

Cabu_husky

最新推荐文章于 2023-12-18 10:35:42 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.csdn.net/Cabu_husky/article/details/106255263

jQuery 专栏收录该内容

7 篇文章

订阅专栏

animate()通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

语法：
$(selector).animate(styles,speed,easing,callback)
四个参数：
1.一组包含作为动画属性和终值的样式属性和及其值的集合
2.动画时间三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或毫秒数
3.动画形式 jQuery提供两种，默认是缓冲swing，匀速是linear
4.回调函数，在动画完成时执行的函数，每个元素执行一次

demo：

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid;
				color: black;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button>点击执行动画</button>
		<div></div>
	</body>
	</html>
	<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		$('button').click(function () {
			$('div').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=50'},'slow','swing').delay(1000)
			.animate({width:'+=50',height:'+=50',left:'+=100',top:'+=50'},'slow','swing').delay(1000)
			.animate({width:'-=100',height:'-=100',left:'-=200',top:'-=100'},'slow','swing').delay(1000)
		})
	</script>

效果：
在这里插入图片描述
如果在项目中需要使用特殊的动画效果，我们可以在引入jQuery后引入jQuery Easing

本身jQuery就提供了很多小的动画效果

效果	方法
show()，hide()，toggle()	显示与隐藏
slideDoen()，slideUp()，slideToggle()	滑动
fadeIn()，fadeOut()，fadeTo()，fadeToggel()	淡入淡出

其实这些方法底层都是调用的animate
方法genFx()接收animate第一个对象传进来的值

	function genFx( type, includeWidth ) {
		var which,
			attrs = { height: type },
			i = 0;
	
		// if we include width, step value is 1 to do all cssExpand values,
		// if we don't include width, step value is 2 to skip over Left and Right
		includeWidth = includeWidth ? 1 : 0;
		for ( ; i < 4 ; i += 2 - includeWidth ) {
			which = cssExpand[ i ];
			attrs[ "margin" + which ] = attrs[ "padding" + which ] = type;
		}
	
		if ( includeWidth ) {
			attrs.opacity = attrs.width = type;
		}
	
		return attrs;
	}

在7615行中，这些小动画都使用了genFx()，通过参数控制执行

	jQuery.each({
		slideDown: genFx("show"),
		slideUp: genFx("hide"),
		slideToggle: genFx("toggle"),
		fadeIn: { opacity: "show" },
		fadeOut: { opacity: "hide" },
		fadeToggle: { opacity: "toggle" }
	}, function( name, props ) {
		jQuery.fn[ name ] = function( speed, easing, callback ) {
			return this.animate( props, speed, easing, callback );
		};
	});

animate的源码，以jQuery1.11.3版本为例
7494行：

	animate: function( prop, speed, easing, callback ) {
		// 判断是否为空对象
		var empty = jQuery.isEmptyObject( prop ),
			// 见下方说明
			optall = jQuery.speed( speed, easing, callback ),
			// doAnimation的本质是执行Animation方法
			doAnimation = function() {
				// Operate on a copy of prop so per-property easing won't be lost
				// Animation执行单个动画的封装
				// this指向目标元素
				var anim = Animation( this, jQuery.extend( {}, prop ), optall );
	
				// Empty animations, or finishing resolves immediately
				// 如果为空，或者finish，动画终止
				if ( empty || jQuery._data( this, "finish" ) ) {
					// true即动画终止
					anim.stop( true );
				}
			};
			doAnimation.finish = doAnimation;
	
		return empty || optall.queue === false ?
			// 衔接链式写法的动画
			this.each( doAnimation ) :
			// 通过队列衔接动画，如果没有用到queue，在上一步就结束了
			this.queue( optall.queue, doAnimation );
	}

optall将运动转化为配置写法

例如上述demo中

	$('div').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=50'},'slow','swing')

在jQuery源码中转化成了

	$('div').animate({width:'+=50',height:'+=50',left:'+=100',top:'+=50'}, {
		duration : ‘slow’,
		easing : 'swing',
		complete : function(){}
	});