jq的自定义动画

原创 2018-11-13 01:39:40 264
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>jq的动画实现</title>
		<style>
			div{width:100px;height:100px;border:1px solid #999;background: pink;margin:10px auto;}
			input{
				margin: 10px auto;
				display: block;
			}
		</style>
		
		<script src="../jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$('input').click(function(){
					$('div').animate(
					{
						width:'500px',
						height:'200px',
						lineHeight:'200px',
						fontSize:'30px',
						borderRadius:'20px'
					},1500)
				})
						
			})
			
		</script>
	</head>
	<body>
		<div>jq的自定义动画</div>
		<input type="button" value="动画">
	</body>
</html>
发布手记

热门词条