jQuery的animate()方法来自定义动画

Original 2018-12-01 00:18:00 184
abstract:<!DOCTYPE html> <html> <head> <title>jQuery的animate()方法来自定义动画</title> <script type="text/javascript" src="jquery-3.3.1.min.js">
<!DOCTYPE html>
<html>
<head>
	<title>jQuery的animate()方法来自定义动画</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
	div{width: 200px;height: 200px;background: red;position: absolute;}

	</style>
	<script type="text/javascript">
		//在jQuery中用 animate()方法来自定义动画
		//语法:$(selector).animate({params},speed,fn);
		//params参数定义形成动画的css属性是必需的
		$(document).ready(function () {
			$('.bt1').click(function () {
				$('p').animate({fontSize:'40px'},1500);
				//属性名称中有-的,全部写成驼峰写法	
			})
			$('.bt2').click(function () {
				$('div').animate({left:'200px',top:'200px',background:'blue'},1500)
			})


		})


	</script>
</head>
<body>
<button class="bt1">点击字体放大</button>
<p>444444444点击字体放大44444444444</p>

<button class="bt2">点击移动DIV</button>
<div></div>

</body>
</html>


Release Notes

Popular Entries