jQuery 常用动画

最新推荐文章于 2024-04-16 15:12:02 发布

每天都有进步

最新推荐文章于 2024-04-16 15:12:02 发布

阅读量122

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/weixin_37141881/article/details/53991698

版权

HTML5 专栏收录该内容

60 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div {
				width: 200px;
				height: 200px;
				background: orange;
				display:none;
			}
		</style>
		<script src="jquery-2.2.4.min.js"></script>
		<script>
			$(document).ready(function() {
					$('#bt1').on('click', function() {
						$('p').toggle(1000);
					})
					$('#bt_fade_in').on('click',function(){
						$('#div_fade_in').fadeIn(1000);
					});
					$('#bt_fade_out').on('click',function(){
						$('#div_fade_in').fadeOut(1000);
					});
					$('#bt_fade_to').on('click',function(){
						$('#div_fade_in').fadeTo(1000,.5);
					});
			});
		</script>
	</head>

	<body>
		<p>被隐藏对象</p>
		<button id="bt1">隐藏</button>
		<button id="bt_fade_in">fadeIn</button>
		<button id="bt_fade_out">fadeOut</button>
		<button id="bt_fade_to">fadeTo设置透明度</button>
		<br/>
		<div id="div_fade_in">FadeIn</div>
	</body>

</html>

　//除此之外还有slideDown, slideup, 每个动画都有一个执行完毕后的回调函数