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

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属性是必需的
		// 停止动画：
		// stop()方法用于停止动画或效果，在它他完成之前，这个方法适用于所有的jQuery
		//效果函数，包括滑动、淡入淡出和自定义动画

		// $(document).ready(function () {
		// 	$('.bt1').click(function () {
		// 		$('p').animate({fontSize:'40px'},1500);
		// 		//属性名称中有-的，全部写成驼峰写法	
		// 	})
		// 	$('.bt2').click(function () {
		// 		$('div').animate({left:'200px',top:'200px',background:'blue'},1500)
		// 	})
		// })
		$(document).ready(function () {
			$('#right').click(function () {
				$('.div1').animate({left:'+200px'},500);
				$('.div1').animate({fontSize:'30px'},3000);
			})
			$('#stop').click(function () {
				$('.div1').stop();
			})
		})


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

<button class="bt2">点击移动DIV</button>
<div></div> -->
<!-- 点击右移按钮，div右移，点击停止按钮当前效果停止 -->
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="div1">PHP中文网</div>
</body>
</html>

Correcting teacher：灭绝师太Correction time：2018-12-01 09:28:29
Teacher's summary：测试的上课代码，比较简单，限次要找点案例试试手奥！

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

Popular Entries