효과 메서드
1. 숨김
hide() : 요소를 숨김
fadeOut() : 요소가 점점 투명해지면서 사라짐
fadeUp() : 요소가 위로 접히며 숨겨짐
-
노출
show() : 숨겨진 요소가 노출
fadeIn() : 숨겨진 요소가 점점 선명해짐
slideDown() : 숨겨진 요소가 아래로 펼쳐짐 -
노출, 숨김
toggle() : hide(), show() 효과를 적용
fadeToggle() : fadeIn(), fadeOut() 효과를 적용
slideToggle() : slideUp(), slideDown() 효과를 적용
fadeTo() : 지정한 투명도를 적용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
/*
*/
$(function() {
$('#m1 button:eq(0)').click(function() {
$('#m1 .box').show();
});
$('#m1 button:eq(1)').click(function() {
$('#m1 .box').hide();
});
$('#m1 button:eq(2)').click(function() {
$('#m1 .box').toggle();
});
$('#m2 button:eq(0)').click(function() {
$('#m2 .box').slideDown('fast', 'swing',)
})
$('#m2 button:eq(1)').click(function() {
$('#m2 .box').slideUp('fast', 'swing',)
})
$('#m2 button:eq(2)').click(function() {
$('#m2 .box').slideToggle('fast', 'swing',)
})
$('#m3 button:eq(0)').click(function() {
$('#m3 .box').fadeIn('fast', 'swing', function() {
$(this).text('jQuery');
});
})
$('#m3 button:eq(1)').click(function() {
$('#m3 .box').fadeOut('fast', 'swing', function() {
$(this).text('내용3');
});
})
$('#m3 button:eq(2)').click(function() {
$('#m3 .box').fadeToggle('fast', 'swing', function() {
if($(this).css('display') === 'none'){
$(this).text('내용3');
} else {
$(this).text('jQuery');
}
});
});
});
</script>
<style>
* {
margin: 5px;
}
.box {
width: 200px;
height: 200px;
border: 2px solid #333;
display: none;
}
</style>
</head>
<body>
<div id="m1">
<button>show</button>
<button>hide</button>
<button>toggle</button>
<div class="box">내용1</div>
</div>
<div id="m2">
<button>slideDown</button>
<button>slideUp</button>
<button>slideToggle</button>
<div class="box">내용2</div>
</div>
<div id="m3">
<button>fadeIn</button>
<button>fadeOut</button>
<button>fadeToggle</button>
<div class="box">내용3</div>
</div>
</body>
</html>
