jQuery学习之动画效果

playboy-jordan

于 2020-06-27 23:16:30 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

分类专栏： # jQuery教程文章标签： javascript css vue.js html html5

本文链接：https://blog.youkuaiyun.com/weixin_44853669/article/details/106989976

jQuery教程专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动画效果切换示例，通过显示和隐藏不同的div元素，实现了动画化的页面元素切换效果。代码中包含了HTML结构定义、CSS样式设置以及jQuery的动画控制脚本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<title>动画效果</title>
		<meta charset="UTF-8"/>
		<!--引入jQuery文件-->
		<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		<!--声明css代码域-->
		<style type="text/css">
			#showdiv{
				height: 300px;
				background-color: orange;
				display: none;
			}
			#div01{
				height: 300px;
				background-color:#8A2BE2;
			}	
		</style>
		<!--声明js代码域-->
		<script type="text/javascript">
			function test(){
				$("#showdiv").show(3000);
				$("#div01").hide(3000);
				/*$("#showdiv").hide(3000);
				$("#div01").show(3000);*/
				$("div").toggle(3000);
				$("#showdiv").slideDown(3000);
				$("#div01").slideUp(2000);
				$("#showdiv").fadeOut(3000);
			}
		</script>
	</head>
	<body onload="test()">
		<div id="showdiv">
			
		</div>
		<div id="div01">
			
		</div>
	</body>
</html>