jQuery动画

最新推荐文章于 2022-12-22 17:52:21 发布

lipeiwen1998

最新推荐文章于 2022-12-22 17:52:21 发布

阅读量57

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/lipeiwen1998/article/details/107543270

版权

jQuery动画 animate()

animate() 用于创建自定义动画的函数
这个函数的关键在于指定动画形式及结果样式属性对象
这个对象中每个属性都表示一个可以变化的数值的样式属性（如“height”、“top”或“opacity”）
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left

参数animate(p,[s],[e],[fn])

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

写一个盒子的大小和位置动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background: #0000FF;
				border: 5px solid #DB7093;
				margin-left: 10px;
			}
		</style>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#div1").animate({
					width:500,
					height:500,
					marginLeft:600
				},3000);
			})
		</script>
	</head>
	<body>
		<div id="div1"></div>
	</body>
</html>

lipeiwen1998

关注

0
点赞
踩
0

收藏

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

jQuery动画 animate()animate() 用于创建自定义动画的函数这个函数的关键在于指定动画形式及结果样式属性对象这个对象中每个属性都表示一个可以变化的数值的样式属性（如“height”、“top”或“opacity”）注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left参数animate(p,[s],[e],[fn])params:一组包含作为动画属性和终值的样式属性和及其值的集合speed:三种预定速度之一的字符串(“slow”,“n
复制链接

扫一扫