객체가 안의 요소를 감추고 부드럽게 보여주고 하는 효과와
서서히 사라지거나 보여주는 효과 두 가지 slide, fade
slideDown()
slideUp()
slideToggle()
fadeIn()
fadeOut()
fadeToggle()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div {
width: 300px;
height: 30px;
background: yellowgreen;
color: orangered;
border-radius: 10px;
text-align: center;
border: 1px solid green;
cursor: pointer;
}
p {
border: 1px solid lightgray;
width: 300px;
height: 20px;
display: none;
}
</style>
</head>
<body>
<h1>slide 메소드</h1>
<h3>slideDown()과 slideUp()</h3>
<div>첫 번째 메뉴</div>
<p class="contents">내용</p>
<div>두 번째 메뉴</div>
<p class="contents">내용</p>
<div>세 번째 메뉴</div>
<p class="contents">내용</p>
<div>네 번째 메뉴</div>
<p class="contents">내용</p>
<div>다섯 번째 메뉴</div>
<p class="contents">내용</p>
<script type="text/javascript">
$(function() {
$(".contents").slideUp();
$("div").click(function() {
// $(this).next("p").slideDown();
$(this).next("p").slideToggle(3000, function() {
alert("토글 완료!");
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>fade() 메소드</h1>
<h3>fadeIn()와 fadeOut()</h3>
<button id="fadein">fadeIn()</button>
<button id="fadeout">fadeOut()</button>
<br>
<img id="flower" src="../image/flower1.PNG">
<script type="text/javascript">
$(function() {
$("#fadein").click(function() {
$("img").fadeIn(1000);
});
$("#fadeout").click(function() {
$("img").fadeOut(1000);
});
});
</script>
<hr>
<button id="toggle">fadeOut()</button>
<br>
<img id="forest" src="../image/forest1.PNG">
<script type="text/javascript">
$(function() {
$("#toggle").click(function() {
$("#forest").fadeToggle(2000, function() {
alert("토글 완료");
});
});
});
</script>
</body>
</html>