ㅁ 특정 요소에 이펙트 효과를 주는 메소드
- 물론 css로 해도 되지만 jQuery로도 간단하게 할 수 있다.
ㅁ < show, hide, toggle 메소드 >
- 요소의 크기(width, height)가 조정되면서 보여지고 사라지는 효과의 메소드.
크기가 점점 작아지면서 사라지고 점점 커지면서 보여지는 효과의 메소드들이다.
- 사용법
요소.show | hide | toggle(['ms']); // 밀리세컨드 제시 가능
- show : 특정 요소의 가로 세로 크기가 점점 커지면서 display를 기존 상태로 처리
- hide : 특정 요소의 가로 세로 크기가 점점 작아지면서 display를 최종 none 처리
- toggle : show() <==> hide()
- block상태가 아닌 기존상태라고 한 이유는, div는 block이지만 span은 inline이다. 요소마다 display의 기존 상태가 다르다.
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>show, hide, toggle 메소드</h2>
<button id="show">show</button>
<button id="hide">hide</button>
<button id="toggle">toggle</button> <br><br>
<img src="../assets/assets/image/city1.jpg" width="300px" id="img-city">
<div id="box" style="width:100px; height: 100px; background-color: red;">box</div>
<script>
$(document).ready(function() {
$('#show').on('click', function() {
$('#img-city').show(1500);
})
$('#hide').on('click', function() {
$('#img-city').hide(1500);
})
$('#toggle').on('click', function() {
$('#box').toggle(1500);
})
})
</script>
</body>
</html>
- 메소드의 인자값으로 1500을 주면 1.5초에 걸쳐서 사라지고 1.5초에 걸쳐서 생긴다.
크기 자체도 점점 작아지면서 사라지고, 점점 커지면서 생긴다.
- 메소드의 인자값을 아무것도 안 주면 바로 생기고 바로 사라진다.
- toggle 버튼을 누르면 1.5초에 걸쳐서 보여지고 있는 상태면 숨겨지고, 숨겨져 있는 상태면 보여진다. (점점 커지거나 점점 작아지면서)
- 이걸 css로 하려고 하면 엄청 어렵다.
- 이미지 뿐 아니라 요소면 다 된다.
ㅁ < fadeIn, fadeOut, fadeToggle, fadeTo 메소드 >
- 요소의 사이즈는 그대로고, 투명도(opacity)가 조정되면서 보여지고 사라지는 효과의 메소드.
- 0이 투명이고 1이 불투명.
- 사용법
요소.fadeIn | fadeOut | fadeToggle(['ms'])
- fadeIn : 투명도가 선명해지면서 display를 기존 상태로 처리
- fadeOut : 투명도가 투명해지면서 display를 최종 none 처리
- fadeToggle : fadeIn() <=> fadeOut()
요소.fadeTo('ms', opacity값)
- fadeTo : 해당 요소의 opacity값을 전달된 값으로 처리
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>fadeIn, fadeOut, fadeToggle, fadeTo 메소드</h2>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button> <br><br>
<img src="../assets/assets/image/city2.jpg" width="300px" id="img-city">
<div id="box" style="width:100px; height: 100px; background-color: red;">box</div>
<script>
$(document).ready(function() {
$('#fadeIn').on('click', function() {
$('#img-city').fadeIn(2000);
})
$('#fadeOut').on('click', function() {
$('#img-city').fadeOut(2000);
})
$('#fadeToggle').on('click', function() {
$('#img-city').fadeToggle(2000);
})
$('#fadeTo').on('click', function() {
$('#img-city').fadeTo(2000, 0.5); // 2초에 걸쳐서 반정도 흐릿해짐
})
})
</script>
</body>
</html>
- 요소가 2초에 걸쳐서 사라진다. 다 사라지고 나서는 요소가 아예 없어진거라 이미지 아래에 있는 박스가 위로 올라옴.
크기가 바뀌진 않음.
ㅁ < slideUp, slideDown, slideToggle 메소드 >
- 요소의 세로 크기가 조정되면서 보여지고 사라지는 효과의 메소드
- 사용법
요소.slideUp | slideDown | slideToggle(['ms'])
- slideUp : 높이가 줄어들면서 display를 최종 none으로 처리
- slideDown : 높이가 늘어나면서 display를 기존 상태로 처리
- slideToggle : slideUp() <=> slideDown()
<div class="q"></div>
<div class="a"></div>
<div class="q"></div>
<div class="a"></div>
<div class="q"></div>
<div class="a"></div>
<div class="q"></div>
<div class="a"></div>
<div class="q"></div>
<div class="a"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- (1) 파일 다운받아서 연결하는 방법
<script src="../assets/assets/lib/jquery-3.7.1.min.js"></script> -->
<!-- (2) CDN 방식으로 연결하는 방법 -->
</head>
<body>
<h2>slideUp, slideDown, slideToggle 메소드</h2>
<div id="qna">
<div class="q">Q. 반품 언제되나요?</div>
<div class="a">A. 지금 확인중입니다.</div>
<div class="q">Q. 상품 위치를 알고싶습니다.</div>
<div class="a">A. 배송 조회 해보세요.</div>
<div class="q">Q. 이 사이즈 있나요?</div>
<div class="a">A. 네 있어요 ^^</div>
<div class="q">Q. 판매자가 연락이 안됩니다.</div>
<div class="a">A. 신고하세요.</div>
<div class="q">Q. 연락 가능한 시간을 알려주세요.</div>
<div class="a">A. 플러스 친구 카카오톡 이용하세요.</div>
</div>
<style>
#qna div{box-sizing: border-box;}
#qna .q{
border: 1px solid yellow;
width: 300px;
background-color: beige;
height: 30px;
line-height: 30px; // 글씨 수직정렬
border-radius: 10px; // 모서리 동그랗게
text-align: center;
cursor: pointer; /* 마우스 올리면 커서가 손가락으로 바뀐다. */
}
#qna .a{
border: 1px solid lightgray;
width: 300px;
height: 100px;
border-radius: 10px;
margin-top: 5px 0px; /* 상하, 좌우 */
padding: 10px;
display: none; // 답변이 안보이게 숨겨놓음.
}
</style>
<script>
$(document).ready(function() {
$('#qna .q').on('click', function() {
// (1) slideToggle 이용
// $(this).next().slideToggle();
// 이러면 q를 클릭하면 q 뒤에 있는 a요소가 보여진다.
// 첫번째 답변을 보다가 다른 질문을 클릭해서 다른 답변이 나오는 순간, 기존에 열려있는 답변은 닫고 싶다.
// $(this).next().siblings('.a').slideUp();
// (2) 직접 slideUp, slideDown 이용
/* 다른 요소 닫는 기능은 없다. q에 맞는 a가 안보이는 상태면 보여지고, 보이는 상태면 안보이게 된다.
const $aEl = $(this).next();
if($aEl.css('display') == 'none') {
$aEl.slideDown();
}
else {
$aEl.slideUp();
}
*/
// 다른 요소는 닫게끔.
const $aEl = $(this).next();
if($aEl.css('display') == 'none') {
$aEl.siblings('.a').slideUp();
$aEl.slideDown();
}
else {
$aEl.slideUp();
}
})
})
</script>
</body>
</html>
스타일 적용 전 세팅
