English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 현재 위치
  2. 홈페이지
  3. 경험 노트
  4. 본문

JQuery로 DIV의 다른 애니메이션 효과 구현하기

1.toggle

객체의 숨기기와 표시를 전환하며 show와 hide 대신 사용할 수 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		var msg1;
		var msg2;
		if($("#div1").css("display")=="none")
		{
			msg1="표시하는 중...";
			msg2="표시 완료!";
		}
		else
		{
			msg1="숨기는 중...";
			msg2="숨기기 완료!";
		}
		$("#info").html(msg1);
		$("#div1").toggle(4000,function(){
			$("#info").html(msg2);
		});
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info">1</div>
<div id="div1></div>
</body>
</html>

2.fadeIn fadeOut

fadeIn(빛내리기), fadeOut(투명도 낮추기)

fadeOut

투명도가 낮아지면 이 부분의 공간이 숨겨지고 아래의 모듈이 위로 이동합니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").fadeOut(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

fadeIn

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").fadeIn(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

3.fadeTo

특정 불투명도로 전환: 0은 완전 투명을 의미합니다:1불투명도를 나타냅니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").fadeTo(4000,0.1);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

4.slideUp와 slideDown

slideUp：위로 슬라이딩 숨기기

slideDown: 숨겨져 있는 객체를 아래로 슬라이딩 표시

slideUp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").slideUp(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

slideDown

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#div1").css("display","none");
	$("#btn").click(function(){
		$("#div1").slideDown(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

5.slideToggle

스ライ딩으로 객체의 숨기기와 표시 토글을切换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 이전 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-이迁移.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<style type="text/css">
#div1
{
	width:200px;
	height:200px;
	background-color:red;
	border:1px black solid;
	clear:both;
}
#btn,#info
{
	float:left;
}
#info
{
	margin-bottom:20px;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#btn").click(function(){
		$("#div1").slideToggle(4000);
	});
});
</script>
</head>
<body>
<input type="button" value="변환" id="btn" />
<div id="info"></div>
<div id="div1></div>
</body>
</html>

이번 jQuery로 DIV 다른 애니메이션 효과 구현 예제가 저의 공유가 끝이에요. 여러분에게 참고가 되길 바라며, 응원教程을 많이 지지해 주시길 바랍니다.

기본 튜토리얼
좋아할 만한 것