学习jQuery特殊效果

最新推荐文章于 2024-05-05 23:45:07 发布

夏至青柠

最新推荐文章于 2024-05-05 23:45:07 发布

阅读量93

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qibulemingzi/article/details/107517878

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery特殊效果

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 切换元素的可见状态
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.wrap{
				width: 200px;
				height: 200px;
				box-shadow: 2px 2px 10px 5px black;
				margin-top: 50px;
				display: none;
			}
		</style>
		<script type="text/javascript">

			// jquery实现 显示和隐藏
			$(function(){
				
				// 1, 获取元素
				var btn=$('button');
				var div_01=$('.wrap');
				// 2, 绑定事件  click
				// jquery  实现一个按钮 控制  淡入和淡出???
			
				// btn.click(function(){
				// 	if(div_01.css('display')=='none'){
				// 		div_01.fadeIn(2000);	
				// 	}else{
				// 		div_01.fadeOut(2000);
				// 	}
				// })
				btn.click(function(){
					// if(div_01.css('display')=='none'){
					// 	div_01.fadeIn(2000);	
					// }else{
					// 	div_01.fadeOut(2000);
					// }
					div_01.fadeToggle(2000);
				})
			})
			
		</script>
	</head>
	<body>
		<button type="button">显示和隐藏</button>
		<div class="wrap">
			这是我要显示或者隐藏的元素
		</div>
	</body>
</html>

夏至青柠

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习jQuery特殊效果

jQuery特殊效果fadeIn() 淡入fadeOut() 淡出fadeToggle() 切换淡入淡出hide() 隐藏元素show() 显示元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素练习<!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti
复制链接

扫一扫