jquery动画总结

最新推荐文章于 2023-01-07 11:09:27 发布

原创最新推荐文章于 2023-01-07 11:09:27 发布 · 550 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

study 同时被 2 个专栏收录

17 篇文章

订阅专栏

jquery

3 篇文章

订阅专栏

本文详细介绍了jQuery中各种动画效果的使用，包括show/hide、toggle、fadeIn/fadeOut/fadeTo、slideUp/slideDown/slideToggle及animate方法。讲解了如何自定义动画速度、透明度和高度变化，并探讨了动画的停止、判断动画状态和延迟执行等高级用法。

标准模式

用jquery做动画效果要求要在标准模式下，否则可能会引起动画抖动。

标准模式即要求文件头部包含如下的DTD定义：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

show()方法和hide()方法

这是jquery中最基本的动画方法。

分别用来显示、隐藏元素。

如 $("element").show()；

甚至可以为其指定一个参数，参数可以是 slow、normal、fast 或者指定数字，单位是毫秒：

（slow是600毫秒，normal是400毫秒，fast是200毫秒）

$("element").show("slow")； //运行该代码后，元素将在600毫秒内慢慢显示出来。

$("element").show(1000)； //运行该代码后，元素将在1000毫秒内慢慢显示出来。

tips：show和hide代码执行过程可以发现它其实是同时增大或者减小元素的高度、宽度、不透明度。

toggle()方法

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

很明显，即快速切换show与hide方法。

详见我的这一篇文章：https://blog.youkuaiyun.com/cccbtrya/article/details/81042570

fadeIn()方法、fadeOut()方法和fadeTo()方法

fadeIn()方法、fadeOut()方法、fadeTo()方法与show()方法不同点在于前者只改变元素的不透明度。

前两个方法的参数有三个： [speed],[easing],[fn]

即与show、hide一样的速度参数；指定切换效果参数(默认是"swing"，可用参数"linear")；在动画完成时执行的函数；

fadeTo()方法能够把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

该方法的参数有四个： [speed],opacity,[easing],[fn]

可以发现，只比前两个方法多了一个透明度参数opacity，即可以指定淡出到多少透明度。

fadeToggle()方法

show()和hide()有toggle()，那么fade系列方法自然也有fadeToggle()方法。

即触发fadeIn()与fadeOut()，参数有三个： [speed],[easing],[fn]

使用代码如下：

点击标题，淡入淡出显示其内容。

 $(function() {
    $("#panel h5.head").click(function() {
        $(this).next().fadeToggle(1000,"swing");
    });    
});

slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法只会改变元素的高度。

同fadeIn()、fadeOut()，一致，也是三个参数: [speed],[easing],[fn]

slideToggle()方法

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

与上文无异，不做过多解释。

animate()方法自定义动画

先介绍animate()的参数吧，有四个参数 params,[speed],[easing],[fn]

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

fn:在动画完成时执行的函数，每个元素执行一次。

看看下面的代码以及实现的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style>
*{
	margin: 0;
	padding: 0;
}
#panel{
	position: relative;
	width: 100px;
	height: 100px;
	border: 1px solid #0050D0;
	background: #96E555;
	cursor: pointer;
}
</style>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script>
$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"500px"},3000);
	});
});
</script>
<body>
<div id="panel"></div>
</body>
</html>

点击向右移动500px

想要它每次点击都增加一定的距离或者减少一定的距离只需要对{left:"500px"}进行操作，在500px之前加上“+=”或者“-=”即可实现当前位置的累加或累减。

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"+=500px"},3000);
	});
});

这只是单一的一个动画，我们甚至可以实现多个动画：

向右移动500px的同时高度增加到200px

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"500px",height:"200px"},3000);
	});
});

上面这个动画是同时发生的，

那么想让他按顺序去执行多个动画怎么做呢？

$(function(){
	$("#panel").click(function(){
		$(this).animate({left:"500px"},2000)
		       .animate({height:"200px"},2000);
	});
});

这样就实现了动画顺序执行啦。

接下来来做一个更复杂的动画：单击<div>元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换到100%，然后再让它从上到下移动，同时它的宽度海边大，完成这些效果后让它以淡出的方式隐藏。

$(function(){
	$("panel").css("opacity","0.5");//设置不透明度起始为50%
	$("#panel").click(function(){
		$(this).animate({left:"500px",height:"200px",opacity:"1"},2000)
			   .animate({top:"200px",width:"200px"},2000)
			   .fadeOut(1000);
	});
});

通过这个例子可以看出，为同一元素应用多重效果时，可以通过链式方式对这些效果进行排队。

如果现在改变需求呢，最后一步不是淡出，而是切换css样式 css("border","5px solid blue");

显然，如果直接将fadeOut(1000);改为css("border","5px solid blue");是不合理的，会在动画开始执行的时候css()方法就被执行了。

这个问题的原因出在css()方法并不会加入到动画队列中，而是立即执行。

这时候就要用到第四个函数参数，即其回调函数。

注意这里第三个参数是可选参数，以下代码直接省略第三个参数，第三个参数的位置直接填入回调函数即可。

$(function(){
	$("panel").css("opacity","0.5");//设置不透明度起始为50%
	$("#panel").click(function(){
		$(this).animate({left:"500px",height:"200px",opacity:"1"},2000)
			   .animate({top:"200px",width:"200px"},2000,function(){
			   	$(this).css("border","5px solid blue");
			   });
	});
});

停止动画和判断是否处于动画状态

停止动画

很多时候需要停止匹配元素正在进行的动画，这时候可以用到stop()方法。

stop()方法的参数有： [queue],[clearQueue],[jumpToEnd]

queue:用来停止动画的队列名称

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行。

看一下怎么使用吧：

$(function(){
	$("#panel").hover(function(){
			$(this).stop()
		   			.animate({height:"150",width:"300"},200);
	},function(){
		$(this).stop()
				.animate({height:"22",width:"60"},200);
	});
});

可以看到鼠标划出的时候会立即停止正在进行的动画，就像用户把光标移入元素时会触发效果，但这个动画还没结束用户就移出光标，那么移出的动画效果就会被放进队列，等光标移入再执行，这样如果用户移入移出过快就会导致动画效果与光标动作不一致，所以必须在光标的移入、移出动画之前加入stop()方法，来解决这个问题。

如果遇到组合动画，例如：

$(function(){
	$("#panel").hover(function(){
		$(this).stop()							
		   		.animate({height:"150"},200) //如果在此时触发了光标移出的事件
		   					     //将执行下面的动画
		   					     //而非光标移出事件中的动画
		   		.animate({width:"300"},300); 
	},function(){
		$(this).stop()
				.animate({height:"22"},200)
				.animate({width:"60"},300);
	});
});

注意：这里可以很明显看到，在其高度到达150px之前如果光标移出，并不会中断后面的动画，而是继续执行宽度到300px这个动画。

此时只用一个不带参数的stop()方法就显得力不从心了，因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段（改变height的阶段），则触发光标移出事件后，只会停止当前的动画，并继续进行下面的改变width 的动画，而光标移出事件中的动画要等这个动画结束后才会继续执行，这显然不是预期的结果，这种情况下stop()方法的第1个参数就发挥作用了，可以把第1个参数(clearQueue)设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。

$(function(){
	$("#panel").hover(function(){
			$(this).stop(true)							
		   			.animate({height:"150"},200) //如果在此时触发了光标移出的事件
		   						     //将直接跳过后面的动画队列
		   			.animate({width:"300"},300); 
	},function(){
		$(this).stop(true)
				.animate({height:"22"},200)
				.animate({width:"60"},300);
	});
});

第2个参数(jumpToEnd)可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过stop(false,true)这种方式来让当前动画直接到达末状态。

当然也可以两者结合起来使用stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。

判断元素是否处于动画状态

在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时，就会出现动画积累。解决办法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：

$(function(){
	if(!$(element).is(":animated")){  	//判断元素是否正处于动画状态
		//如果当前没有进行动画，则添加新动画
	}
});

延迟动画

delay()方法允许我们将队列中的函数延时执行。它既可以推迟动画队列中函数的执行，也可以用于自定义队列。

$(function(){
	$("panel").css("opacity","0.5");//设置不透明度起始为50%
	$("#panel").click(function(){
		$(this).animate({left:"500px",height:"200px",opacity:"1"},2000)
			   .delay(1000)
			   .animate({top:"200px",width:"200px"},2000)
			   .delay(2000)
			   .fadeOut(1000);
	});
});