jquery详解animate方法

时间：5年前阅读：5047

1、animate是jquery的一个方法，这个方法主要功能是能实现比较平滑的动态效果，所以你想做一个简单又不失美观的动态效果不如试试它，下面举个例子

<!DOCTYPE html>    
<html>    
	<head>    
		<meta charset="UTF-8">    
		<title></title>    
		<style type="text/css">    
			#tt{    
				position: absolute;    
				/*left: 0px;*/    
				top: 100px;    
			}    
		</style>    
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>    
		<script type="text/javascript">    
			$(function(){    
				$('#dd').click(function(){    
//		animate 动画; 	{'left':'600px'}开始走600px, 走3000   linear：走的状态(匀速运动)一般我们用变速运动比较多，匀速运动看起来视觉不舒服    
//					$('#tt').animate({'left':'600px'},3000,'linear');    
					$('#tt').animate({'left':'600px'},3000,function(){    
//						function这里是回调函数,走完这个动画,再执行函数内容    
						alert('到了，走了600px');    
					});    
				})    
			})    
		</script>    
	</head>    
	<body>    
		<input type="button" name="dd" id="dd" value="一点就跑!" />    
		<br /><br />    
		<img src="https://www.qiquanji.com/data/img/dmj/201903141552521811146879.gif" alt="" id="tt" style="left: 0px;"/>    
	</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

jquery详解animate方法

网友评论