jQuery动画（二）

最新推荐文章于 2024-08-30 10:25:23 发布

藜笙

最新推荐文章于 2024-08-30 10:25:23 发布

阅读量227

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/HG13542386794/article/details/117931244

版权

本文详细探讨了jQuery的动画功能，包括自定义动画的简单实现、累积效果、回调函数的应用，以及队列动画和如何使用stop()方法来停止动画。通过实例展示了如何创建和控制动画的执行顺序和状态。

摘要由CSDN通过智能技术生成

1.自定义动画

对于自定义动画，我们将其分为3个方面来解析。

·简单动画

·累积动画

·回调函数

（1）简单动画

在jQuery中，对于自定义动画，我们都是使用animate()方法来实现的。

语法：

$().animate(params,spend,fn)

说明：

params是一个必选参数，表示属性值列表，也就是元素在动画中变化的属性列表。

speed是一个可选参数，表示动画的速度，单位为毫秒，默认为400毫秒。如果省略参数，则表示采用默认速度。

fn也是一个可选参数，表示动画执行完成后的回调函数。

举例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
		div{
			width: 30px;
			height: 50px;
			background-color: lightgreen;
		}
	</style>
</head>   
<body>
	<div></div>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script>
	    $(function(){
			$("div").click(function(){
				$(this).animate({"width":"120px","height":"120px"},1000);
			})
		})
	</script>	
</body>
</html>

样式图：点击前点击后