10. fadeToggle
- 사용법 : $(css선택자).fadeToggle(상태);
- 상태 : slow, fast 등
- css선택자가 있다면 천천히 사라지고, 없으면 천천히 나타남
<!-- 11_jq_fade.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- TODO: 애니메이션) 서서히 나타났다/서서히 사라짐 -->
<button>Toggle Show</button>
<div class="page">
<h1>Lorem</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<!-- jquery cdn -->
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<!-- js -->
<script>
// 형태 :
$(function(){
// jquery 코딩
// 예제 : 1)버튼 클릭하면 2)서서히 사라지고/또 클릭하면 나타남
$("button").click(function(){
// 2)서서히 사라지고/또 클릭하면 나타남
// 사용법 : $("css선택자").fadeToggle("상태값");
// - 상태값 : slow, fast 등 (애니메이션 속도)
$(".page").fadeToggle("slow");
});
});
</script>
</body>
</html>
그냥 졍이라구하자