오늘은 자바스크립트 라이브러리 중 하나인 jQuery 에서 사용 가능한 이펙트 함수 중 가장 빈번하게 쓰이는 " show / hide / toggle " 에 대해 알아보고자 합니다.
검색해서 들어오셨다면 기본적인 jQuery 사용 방법은 숙지하셨다 생각하고 바로 본론으로 들어갑시다!
show() & hide() Example
$("#tagID").show(); // display 속성을 block 으로 바꾼다. $("#tagID").hide(); // display 속성을 none 으로 바꾼다.보여주거나 감추고 싶은 태그 ID를 넣어주면 됩니다. 간단합니다.
show() / hide() Syntax
더 정확한 문법은 다음과 같습니다.
$(selector).show(speed,callback); $(selector).hide(speed,callback);- selector - 태그 ID 값 또는 선택할 노드들의 셀렉터 구문을 넣어줍니다.
- speed(optional) - "slow", "fast", 또는 밀리세컨드의 숫자를 넣어주면 보여주거나 감출 속도를 정할 수 있습니다.
- callback(optional) - 콜백 함수를 설정하면 show()/hide() 함수 완료 후 실행됩니다.
정확한 이해를 위해 예제 코드를 보면 좋겠죠? 여기를 클릭해서 연습합시다.
show() / hide() Complex Example
예전엔 이런식의 코드도 많이 사용했었습니다. 지금도 사용 가능합니다.
function toggle_layer() { if($("#layer").css("display") == "none"){ $("#layer").show(); }else{ $("#layer").hide(); } }위와 같은 함수를 만들땐 여러가지 복합적으로 처리를 할 때 가끔 사용하면 좋겠죠. 하지만 단순한 on/off 기능이 필요하다면 toggle() 함수를 써봅시다.
toggle() Example
$("#tagID").toggle(); // show -> hide , hide -> showtoggle()을 사용하게 되면 이전 상태에 따라 현재 상태를 반대로 바꿔줍니다.
toggle() Syntax
$(selector).toggle(speed,callback);- selector - 태그 ID 값 또는 선택할 노드들의 셀렉터 구문을 넣어줍니다.
- speed(optional) - "slow", "fast", 또는 밀리세컨드의 숫자를 넣어주면 보여주거나 감출 속도를 정할 수 있습니다.
- callback(optional) - 콜백 함수를 설정하면 toggle() 함수 완료 후 실행됩니다.
정확한 이해를 위해 예제 코드를 봅시다. 여기를 클릭해서 연습합시다.
Closing Remarks
간단하게 show() / hide() / toggle() 에 대해 알아봤습니다. 틀린 부분, 추가 보충해야 할 부분 전부 댓글에 적어주시면 고맙겠습니다!
(아래에 나와 있지만 현재 이 기능의 대부분은 Deprecated되어 현재 예제대로 구현되지 않을 수 있습니다. 최신 버전의 jQuery에서는 다른 기능으로 toggle()이 사용되니 이 점 알아두세요!)
# 제이쿼리 toggle() 메소드 알아보기함수 두 가지를 번갈아가며 실행하는 방법처럼 토글 및 스위치처럼 동작되게 하는 메소드로 제이쿼리에 toggle()이 있습니다. 그럼 예제를 통해 자세히 알아봅니다.
! toggle() 메소드 는 언제 사용할까 아래 이미지를 보시면 상단 우측에 작은 메뉴 버튼이 보이시나요? 이 버튼을 클릭하면 메뉴바의 길이(height)가 길어져 안보이던 버튼들이 나타납니다... 그리고 다시 한번 더 버튼을 누르면 길이가 다시 줄어들게 되죠. 마치 온/오프 버튼처럼 계속 반복됩니다.
이런 경우 toggle() 함수를 쓰면 매우 유용하게 구현이 가능합니다. 그럼 어떻게 구현하는지 아래 예제를 참고하세요.
# toggle() 예제소스 코드보기아래는 간단한 toggle() 메소드의 예제코드입니다. 여기서는 버튼을 클릭할때마다 css의 높이값을 다르게 설정하여 보여주고 감추는 것이 반복되게합니다.
@ toggle.html
button1
button2
button3
@ toggle.js
$('#button').toggle(function() {
$(this).parent().css('height', 'auto');
}, function() {
$(this).parent().css('height', '18px');
});
위 예제는 두 개의 함수를 반복 실행토록 하게하여 마치 스위치를 온/오프한 것과 같은 효과를 주었습니다. 버튼을 클릭하면 높이가 18px로 고정되고 다시 누르면 자동으로 설정되게됩니다. 추가로 이보다 더 많은 함수를 입력하여 순차적으로 실행되도록 할 수도 있습니다.
# 마치면서참고로, 제이쿼리 1.8 부터는 축소 및 대체된 메소드로 toggleClass()를 사용해 동일한 기능 구현이 가능하니 toggleClass() 메소드를 사용하는 것이 좋을 것입니다.
The jQuery toggle() is a special type of method which is used to toggle between the hide() and show() method. It shows the hidden elements and hides the shown element.
Syntax:
speed: It is an optional parameter. It specifies the speed of the delay. Its possible vales are slow, fast and milliseconds.
easing: It specifies the easing function to be used for transition.
callback: It is also an optional parameter. It specifies the function to be called after completion of toggle() effect.
목차
hide()/slow() 구문 ★ - 숨기기/보이기
숨기기
$(selector).hide(speed, easing, callback);
보이기
$(selector).show(speed, easing, callback);
speed
선택. 동작 완료에 걸리는 시간. (기본값: 400)
※ 3가지 표현 가능. (주의: slow, fast 적을 때 따옴표 사용)
- "slow"
- "fast"
- 1/1000 초 (= 밀리초). (1초 = 1000)
easing
선택. 속도 변경 방법. (기본값: swing) ※ 가능값은 아래와 같음.
- swing : 시작/끝은 더 느리게. 중간에선 더 빠르게. (기본값)
- linear : 똑같은 속도 유지.
- ※ 그외도 많은데, 이건 구글링. ㅡㅡ;
callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)
hide() 예제 - 요소 자신 클릭해서 숨기기
$(document).ready(function(){
홈짱닷컴 (Homzzang.com)
결과보기
hide() 예제 - 자식요소 클릭해 부모요소 숨기기
$(document).ready(function(){
$(".intro .hide").click(function(){
$(this).parents(".intro").hide("slow");
background-color: #fef5f7;
border: 1px solid #fd87c0;
div.intro > button {float:right;}
홈짱닷컴 (Homzzang.com)
숨기기
결과보기
hide() 예제 - 숨기기 속도 옵션
$(document).ready(function(){
$("button").click(function(){
홈짱닷컴 (Homzzang.com)
show()/hide() 예제 - 탭 효과
홈짱닷컴
Homzzang.com
코딩강의
버튼1
버튼2
버튼3
결과보기
PS. 이 방법은 브라우저에 로드 후 보이기/숨기기 처리하니, AJAX 이용 권장.
toggle() 구문 ★ - 숨기기 /보이기 상호 전환
$(selector).toggle(speed, callback);
[매개변수]
speed
선택. 동작 완료에 걸리는 시간. (기본값: 400)
※ 3가지 표현 가능. (주의: slow, fast 적을 땐 따옴표 사용.)
- "slow"
- "fast"
- 1/1000 초 (= 밀리초). (1초 = 1000)
callback
선택. 동작 완료 후, 실행시킬 함수. (= 콜백함수)
toggle() 예제 - (숨기기/보이기) 순서
$(document).ready(function(){
$("button").click(function(){
홈짱닷컴 (Homzzang.com)
toggle() 예제 - (보이기/숨기기) 순서
$(document).ready(function(){
$("p").hide();$("button").click(function(){
홈짱닷컴 (Homzzang.com)
결과보기