effect
이벤트를 통해 태그를 자유자재로 조작할 수 있게 되었습니다.
하지만 단순하게 숨기고 색깔을 바꾸기만 하는 건
언제부턴가 멋지지 않은 것 같습니다.
좀 더 심미적이고 지루하지 않게 화면구성을 하는 것이
사용자 경험을 향상시킬 수 있을 겁니다.
effect를 이용해서
이벤트에 효과를 더할 필요가 있습니다.
기초적인 effect의 종류는 다음과 같습니다.
$("선택자").hide() - 선택요소 숨기기
$("선택자").show() - 선택요소 보이기
$("선택자").toggle() - 보이면 숨기고 안보이면 노출
$("선택자").slideUp() - 말아올라가듯 숨김
$("선택자").slideDown() -말아내려가듯 노출
$("선택자").slideToggle() - slide형태로 toggle 적용
$("선택자").fadeOut() - 서서히 사라지게 함
$("선택자").fadeIn() - 서서히 보이게 함
$("선택자").fadeTo() - 요소를 원하는 만큼 투명화함
또 코드를 통해 확인해야겠습니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
body {
font:12px/1.5 "굴림", Gulim;
margin:10px;
}
h2{
margin-top: 20px;
}
</style>style태그 입니다.
<body>
<div id="wrap">
<h1>제이쿼리 Effect들</h1>
<p>
제이쿼리에서는 화면전환 슬라이드 업다운
<br/>
등의 다양한 효과 메서드를 제공합니다.
</p>
<h2>show/hide 효과</h2>
<p>
<button id="btn1">hide</button>
<button id="btn2">show</button>
</p>
<p class="box1">
선택요소를 숨기거나 노출시킬 때 씁니다. <br/>
hide(시간)/show(시간)<br/>
시간은 fast, normal, slow등으로 입력하거나 <br/>
혹은 밀리초(1000분의 1초)단위의 숫자로 입력해도<br/>
그 입력한 시간에 걸쳐서 작동합니다.
</p>
<h2>Toggle 효과</h2>
<p><button id="btn3">toggle</button></p>
<p class="box2">
선택요소가 숨겨져있다면 보이게,<br/>
보인다면 숨기게 만들어줍니다.
</p>
<h2> sideDown/Up 효과 </h2>
<p>
<button id="btn4">slideUp</button>
<button id="btn5">slideDown</button>
<button id="btn6">slideToggle</button>
</p>
<p>
slideUp은 선택요소를 위로 말아올리며 숨기고<br/>
slideDown은 선택요소를 아래로 말아내려 노출
</p>
<h2>fadein/fadeOut</h2>
<p>
<button id="btn7">fadeOut</button>
<button id="btn8">fadeIn</button>
<button id="btn9">fadeToggle</button>
</p>
<p>
fadeOut은 선택 요소를 천천히 사라지게 합니다.<br/>
fadeIn은 선택요소를 천천히 노출되게 합니다.
</p>
<h2>fadeTo 효과</h2>
<p>
<button id="btn10">fadeTo(0.3)</button>
<button id="btn11">fadeTo(1)</button>
</p>
<p id="box3">
fadeTo는 선택요소를 원하는 만큼만<br/>
보이거나 숨길 수 있습니다.
</p>
</div>
</body>body 태그입니다.
준비가 되었으니 script태그를 작성해보겠습니다.
<script>
$ (() => {
// 다음은 id가 btn1요소를 클릭할 때
// class명이 box1인 요소를 천천히 숨기는
// 효과입니다.
$("#btn1").click(function(){
$(".box1").hide("slow");
})
btn1을 누르면을 누르면 클래스명이 box1인 p태그가
숨겨지게 해보았습니다.
$("#btn2").click(function(){
$(".box1").show("slow");
})btn2를 누르면 show 이벤트가 수행됩니다.
$("#btn3").click(function(){
$(".box2").toggle("slow");
});toggle에 click을 걸면 숨겨져 있을 때는 보여주고
보여지고 있을 때는 숨겨줍니다.
그럼 이제 #btn4를 클릭했을 때 #btn4의 부모.parent()의
다음 형제 .next를 말아올려 숨기는 이벤트를 걸어보겠습니다.
$("#btn4").click(function(){
$("#btn4").parent().next().slideUp("slow");
});
.parent().next()를 이용해서 body태그 속 DOM을 따라
아이디나 클래스가 지정되지 않은 p태그를 지정해 이벤트를 걸 수 있게 되었습니다.
$("#btn5").click(function(){
$("#btn5").parent().next().slideDown("slow");
});
$("#btn6").click(function() {
$("#btn6").parent().next().slideToggle("fast");
});바로 onclick을 걸고 slideDown과 slideToggle도 적용을 시켰습니다.
#btn7 ~~이상에 fadeOut, In, Toggle을 거는 것도
어렵지 않게 되었습니다.
$("#btn7").click(function(){
$("#btn7").parent().next().fadeOut("slow");
});
$("#btn8").click(function(){
$("#btn8").parent().next().fadeIn("fast");
});
$("#btn9").click(function(){
$("#btn9").parent().next().fadeToggle("fast");
});그리고 fadeTo(속도, 투명도);는
태그의 투명도를 조절해줍니다.
속도는 fast, slow, normal, 혹은 밀리초 단위의 수를
투명도는 0.3, 1을 걸어보았습니다.
$("#btn10").click(function(){
$("#btn10").parent().next().fadeTo("slow", "0.3");
});
$("#btn11").click(function(){
$("#btn11").parent().next().fadeTo("slow", "1");
});일단은 여기까지 입니다.