JQuery动画效果_php.cn手记

abstract：<!DOCTYPE html> <html> <head> <title>JQuery的动画效果--自定义动画</title> <meta charset="utf-8"> <script type="text/javascript"

<!DOCTYPE html>
<html>
<head>
	<title>JQuery的动画效果--自定义动画</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css">
		.box{height: 120px;width: 100px;float: left;margin-right: 20px;}
		.ele1{height: 100px;width: 100px;background: blue;position: absolute;}
		.ele2{height: 100px;width: 100px;background: red;
				border-radius: 100px;position: absolute;}
		button{height: 40px;width: 100px;border:none;}
	</style>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.bt1').click(function(){
				$('.ele1').animate({
					right:'50px',
					opacity:'0.3'
				},3000)
			});
			$('.bt2').click(function(){
				$('.ele2').animate({
					bottom:'50px',
					height:'300px',
					width:'300px',
					borderRadius:'300px'
				},3000)
			})
		})
	</script>
</head>
<body>
	<div class="box">
	<button class="bt1">点击抛出方块</button>
	<div class="ele1"></div>
	</div>
	<div class="box">
		<button class="bt2">点击球体落下</button>
		<div class="ele2"></div>
	</div>
</body>
</html>

JQuery的动画效果很有趣，但是也有缺点，不能改变背景色，无法做出渐变效果，写代码的时候发现了自己一个很粗心的习惯，在给了标签class或者ID名的时候，JS读取标签的时候，总是忘记在前面加个.或者#，导致自己以为遇到了什么了不得的bug

JQuery动画效果

Popular Entries