jQuery动画animate()的使用

小圣_fighting

于 2016-03-15 10:41:30 发布

阅读量1.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：学习笔记 html 文章标签： jQuery 动画

本文链接：https://blog.youkuaiyun.com/xie_xiansheng/article/details/50894626

学习笔记同时被 2 个专栏收录

81 篇文章

订阅专栏

html

27 篇文章

订阅专栏

本文介绍了一个使用 jQuery 实现自定义动画效果的例子。通过 animate 方法，可以轻松地改变 HTML 元素的位置属性，实现平滑过渡效果。代码示例中演示了如何让一个 div 元素从当前位置斜下移动到目标位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义动画效果：

用法：animate（js对象，执行时间，回调函数）；
js对象：{ }描述动画执行之后元素的样式
执行时间：毫秒数

回调函数：动画执行结束后要执行的函数

html代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-2.1.4/jquery.min.js" language="javascript"></script>
</head>

<body>
<div id="div1" style="width:200px; height:100px; background-color:#999999; position:absolute"  onclick="f1()"></div>

</body>
<script>
function f1(){
<span style="white-space:pre">			</span>//距离左 50%，距离上 300px 结果：斜下移动
	$("#div1").animate({"left":"50%","top":"300px"},3000,function(){
	  alert("动画完成");
	});

	
}
</script>
</html>

效果图：