jQuery动画animate()的使用

Posted clnchanpin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery动画animate()的使用相关的知识,希望对你有一定的参考价值。

自己定义动画效果:

使用方法: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>

效果图:

技术分享























以上是关于jQuery动画animate()的使用的主要内容,如果未能解决你的问题,请参考以下文章

jQuery动画animate()的使用

jquery animate方法动画效果没有

jQuery中animate()方法用法实例

jquery之动画animate底层原理猜测

人人必知的10个jQuery小技巧

jQuery中关于如何使用animate自定义动画