카테고리 없음
jQuery 시각적인효과메소드
mi-ni
2024. 2. 1. 09:58
시각적인효과(Effect)
페이지 내에 애니메이션 효과를 주기 위해 사용되는 메소드 집합
show()와 hide(), toggle()
선택한 요소가 점점 커지면서 보여지고, 점점 작아지면서 사라지게 하는 메소드
<body>
<h1> 시각적인 효과 (Effect)</h1>
<p>페이지 내에 애니메이션 효과를 주기 위해 사용되는 메소드 집합</p>
<h3>* show()와 hide(), toggle()</h3>
<p>선택된 요소가 점점 커지면서 보여지고, 점점 작아지면서 사라지게 하는 메소드</p>
<button id="hide">숨기기</button>
<button id="show">보여주기</button>
<button id="toggle">토글</button>
<br><br>
<!-- <img src="../02_CSS3/resources/image/city1.PNG" > -->
<img id="sh" src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMzAxMTlfMjIx%2FMDAxNjc0MTM1MjIzNDcw.ocb8_8ocC6laVulTy4-B01oWfyow35rQDP_k9GR577kg.0qW7u_QIsU0ZkD6Gj_PCqDNtoSxgJDbQU7hldP-cw6Ag.JPEG.myncmr%2Foutput_3457967475.jpg&type=sc960_832" >
<br>
<div id="area" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
$(function(){
$("#hide").click(function(){
//$("#sh").hide();
$("#sh").hide(3000);
$("#area").hide(3000);
})
$("#show").click(function(){
//$("#sh").show();
$("#sh").show(3000);
})
$("#toggle").click(function(){
$("#sh").toggle();
})
})
</script>
</body>
fadeIn()과 fadeOut(), fadeToggle()
선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게 하는 메소드
<body>
<h3>* fadeIn()과 fadeOut(), fadeToggle()</h3>
<p style="background-color: red; opacity: 0.6;">선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게 하는 메소드</p>
<button onclick="test1()">숨기기</button>
<button onclick="test2()">보여주기</button>
<button onclick="test3()">토글</button>
<br><br>
<img id="hem" src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fd2u3dcdbebyaiu.cloudfront.net%2Fuploads%2Fatch_img%2F761%2F135cd4bb8aaf851cd8f03e561f82ff7b_res.jpeg&type=sc960_832" >
<script>
function test1(){
$("#hem").fadeOut(2000);
}
function test2(){
$("#hem").fadeIn(2000);
}
function test3(){
$("#hem").fadeToggle(2000);
}
</script>
</body>
slideDown()과 slideUp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
div{
background-color: beige;
border: 1px solid yellow;
width: 300px;
height: 30px;
line-height: 30px; /* 글자가 가운데 위치 */
text-align: center;
border-radius: 10px;
cursor: pointer;
}
p{
border: 1px solid lightgray;
width: 300px;
height: 100px;
border-radius: 10px;
margin-top: 5px; /*p테그는 기본적으로 위아래 마진을 가지고 있다 */
padding: 10px;
box-sizing: border-box;
display: none;
}
</style>
</head>
<body>
<h3>* slideDown()과 slideUp</h3>
<!-- (div+p)*5 -->
<div>Q. 반품 언제되나요?</div>
<p>A. 지금 확인중입니다.</p>
<div>Q. 상품 위치를 알고 싶습니다.</div>
<p>A. 배송조회 해보세요. 핑프세요?</p>
<div>Q. 8XL 사이즈 있나요?</div>
<p>A. 네 있어요 ^_^</p>
<div>Q. 판매자가 연락이 안됩니다.</div>
<p>A. 알바누~</p>
<div>Q. 연락이 가능한 시간을 알려주세요</div>
<p>A. 몰루</p>
<script>
$(function(){
$("div").click(function(){
// $(this) : 클릭이벤트가 발생한 div 요소
// 우리는 그 요소의 뒤의 요소를 선택해야함. (같은 레벨에 있음)
// $(this).next() : 클릭 이벤트가 발생한 div 요소 뒤에 있는 p요소
// 보여지는 상태면 사라지게 안보이면 나타나게
// const p = $(this).next();
const $p = $(this).next(); // jQuery 방식으로 선택된 요소를 담아 둘 때
if($p.css("display") == "none"){
// 보여지게끔
//$p.css("display", "block");
// 기존에 열렸던건 닫히면서 지금꺼만 열리게
// 우선은 다 닫아
$(this).siblings("p").slideUp();
$p.slideDown();
$p.siblings("p").slideUp();
}else{
// 안보여지게끔
$p.slideUp();
}
})
})
</script>
</body>
</html>