<!-- button[id=]*3 + Enter -->
<button id="hide">숨기기</button>
<button id="show">보여주기</button>
<button id="toggle">토글</button>
<br><br>
<img id="bonu" src="resources/image/bonu.jpg">
<br>
<div id="area" style="width:100px; height:100px; background-color:red;"></div>
<!-- 꼭 이미지가 아니더라도 일반적인 다른 요소에도 적용 가능 -->
<script>
$(function() {
$("#hide").click(function() {
$("#bonu").hide(3000); // 3초 동안 서서히 사라짐(밀리세컨초 단위)
$("#area").hide(1000); // 1초 동안 서서히 사라짐
});
$("#show").click(function() {
$("#bonu").show(3000); // 3초 동안 서서히 보여짐 (밀리세컨초 단위)
$("#area").show(5000); // 5초 동안 서서히 보여짐
});
// toggle은 스위치 개념 (on/off 기능), 마찬가지로 시간을 지정할 수 있음
$("#toggle").click(function() {
$("#bonu").toggle(10000);
$("#area").toggle(10000);
}) ;
// 개발자 도구에서 style 속성이 실시간으로 변경됨
// 시간을 지정 안 하면 깜빡, 시간을 지정하면 서서히 반영됨
});
</script>
fadeIn()과 fadeOut(), fadeToggle()
👉🏻 선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게 해 주는 메소드
기본 상태
숨긴 후에 위로 당겨짐 (위에 공간 없음!)
다시 보여 주는 중
(티는 안 나지만) 토글 중
각 버튼 클릭 후 개발자도구 확인해 보면 opacity가 정신없이 우다다 바뀜
<!-- button[id=]*3 + Enter -->
<button id="fadeOut">숨기기</button>
<button id="fadeIn">보여주기</button>
<button id="fadeToggle">토글</button>
<br>
<img id="gayoung" src="resources/image/gayoung.jpg">
<script>
$(function() {
// fadeIn과 fadeOut, fadeToggle()도 마찬가지로 시간(밀리세컨초)을 지정 가능
$("#fadeOut").click(function() {
$("#gayoung").fadeOut(3000);
$("#area").fadeOut(3000); // 꼭 이미지 요소가 아니더라도 다른 요소에도 적용 가능
// 숨겨지고 나서 display : none; 이 되기 때문에 요소가 숨겨질 뿐만 아니라
// 자리도 차지하지 않게 돼서 아래의 요소들이 위쪽으로 당겨와짐
});
$("#fadeIn").click(function() {
$("#gayoung").fadeIn(5000);
$("#area").fadeIn(2000);
});
// fadeToggle() 는 on / off 기능이다
$("#fadeToggle").click(function() {
$("#gayoung").fadeToggle(1000);
$("#area").fadeToggle(1000);
});
});
</script>
slideDown() 과 slideUp() 메소드를 활용한 쇼핑몰 FAQ의 예
👉🏻 FAQ(Frequently Asked Questions) : 자주 묻는 질문
👉🏻slideDown() : 서서히 내려오면서 보여 주는 메소드 👉🏻slideUp() : 서서히 올라가면서 사라지는 메소드 👉🏻slideToggle() : on / off 기능
기본 상태
하나 열어 봄
다른 거 열면 기존 거 닫힘
똑같은 거 열면 닫힘
<head>
<style>
div {
background-color : rgb(218, 220, 255);
width : 300px;
height : 30px;
text-align : center;
line-height : 30px; /* line-height는 세로 길이를 똑같이 주면 위아래 가운데로 */
border-radius: 10px;
color : rgba(175, 104, 216, 0.822);
font-weight : 600;
border : 3px solid white;
cursor : pointer;
}
p {
border : 1px solid rgba(175, 104, 216, 0.822);
width : 300px;
height : 100px;
margin-top : 5px;
border-radius: 10px;
padding : 10px;
box-sizing : border-box; /* 내가 지정한 크기는 border까지 포함이야 */
display : none;
}
</style>
</head>
<body>
<h3>*slideDown() 과 slideUp() 메소드를 활용한 쇼핑몰 FAQ의 예</h3>
<!-- FAQ(Frequently Asked Questions) : 자주 묻는 질문 -->
<!--
slideDown() : 서서히 내려오면서 보여 주는 메소드
slideUp() : 서서히 올라가면서 사라지는 메소드
slideToggle() : on / off 기능
-->
<div>Q. 반품 언제 되나요?</div>
<P>A. 지금 확인 중</P>
<div>Q. 내 택배 ㅇㄷ 잇나요 </div>
<p>A. 네이버에 송장번호 검색 ㄱㄱ</p>
<div>Q. 이 상품 사이즈 있나요?</div>
<p>A. 우리는 없는 거 빼고 다 잇오 *^___^*</p>
<div>Q. 전화 통화 가능 시간 알려 주세요.</div>
<p>A. 전화는 시름... 카톡 플친 추가 요망</p>
<div>Q. 판매자가 돈만 받고 물건 안 줌</div>
<p>A. 판매자 메일로 니가 연락해 바바 purchase@xxxx.com</p>
<script>
$(function() {
$("div").click(function() {
// $(this) : 현재 이벤트가 발생한 요소 (target)
// $(this).next() : 현재 클릭된 div 요소의 바로 뒤 요소 한 개(= 답변이 달린 p 요소)
var $p = $(this).next(); // 변수에 담아 놓기
// jQuery 방식으로 선택된 요소 객체를 담아 둘 때 변수명 앞에 $를 붙임 (관례상)
// 만약 답변을 담은 p 요소가 display : none; 상태라면(다른 답변이라면) = 보여지게끔
// 만약 답변을 담은 p 요소가 display : none; 상태가 아니라면(현재 열고 있는 답변이라면) = 없어지게끔
if($p.css("display") == "none") {
// .css() 메소드 또한 속성명만 매개변수로 넘기게 되면 해당 속성값을 반환해 줌
// 자바로 따지면 getter / setter 메소드 역할을 동시에 수행해 줌
// 2단계: 다른 답변 열기 전 기존에 열려 있던 답변을 먼저 닫아 주기
$(this).siblings("p").slideUp(1000); // 내 형제들 중에서 p 태그만 모두 선택 후 닫아 줄 거야
// 1단계: 답변이 보여지게끔
$p.slideDown(1000);
// $p.slideUp(1000); // 답변이 1초 동안 내려갔다가(열림) 답변이 1초 동안 다시 올라감(닫힘)
} else {
// 3 단계: 기존 열려 있던 답변 닫아 주기
// $(this).siblings("p").slideUp(1000);
$p.slideUp(1000);
};
});
});
</script>