[jQuery] 특정 요소 보이게 하거나 숨기기 feat. toggle
jQuery 를 이용하여 웹페이지의 특정 요소를 보이게 하거나 숨기는 기능을 하는 toggle 함수에 대해 알아봅시다.
요소의 보이거나 숨기게 하도록 알아서 처리하는 toggle 함수
하나의 버튼을 이용해 요소를 보여주거나 숨기도록 하려면 기본적으로 아래의 과정을 거쳐야 합니다.
- 대상이 되는 요소의 현재 상태(보임/숨김)를 파악
- 대상 요소의 현재 상태가 보임이면 숨김으로 전환
- 대상 요소의 현재 상태가 숨김이면 보임으로 전환
코드로 표현해보면 아래와 같습니다.
if ( 요소.상태 == 보임 ) { 요소.상태 = 숨김 }
else ( 요소.상태 == 숨김 ) { 요소.상태 = 보임 }
jQuery 의 toggle 함수는 이 귀찮은 작업을 간단하게 해결 해줍니다. toggle 함수만 실행시켜주면 요소의 현재 상태에 따라서 알아서 보임이나 숨김으로 바꿔주는 것이죠.
toggle 함수 사용 방법
.toggle( duration [, easing ] [, complete ] )
위 코드는 toggle 함수의 기본적인 사용법입니다. 물론 이 파라미터들을 다 적어주지 않고 .toggle() 이라고만 사용해도 됩니다. 아래에서 각 파라미터들이 의미하는 바를 알아봅시다.
.toggle( duration )
duration 은 요소를 숨기거나 보여줄 때 얼마의 시간을 소요할지 결정합니다. 기본적으로는 slow 와 fast 를 사용할 수 있고, 직접 시간을 숫자로 넣어줘도 됩니다. 숫자로 넣을때 단위는 1/1000 초 입니다.
.toggle( ['slow', 'fast', '800'] )
toggle( easing )
easing 은 요소를 보여주거나 숨김할 때 애니메이션을 처리 하는 방법을 나타냅니다. swing 과 linear 를 사용할 수 있고, 기본값은 swing 입니다.
swing 은 요소를 보여주는 애니메이션에서 처음과 끝부분은 속도가 조금 느리고 중간에는 빨라집니다. linear 는 일정한 속도록 처리합니다.
말로 설명하니 이게 뭔가 싶을 수 있는데, Easing – jQuery UI 에서 직접 해보면 바로 어떤 의미인지 알수 있습니다.
toggle( complete )
complete 에는 요소를 보여주거나 숨기는 작업이 완료 된 후 처리할 함수를 넣을 수 있습니다. 기본적으로 function() 형태로 넣어주어야합니다. 아래 예제를 보시죠(개판으로 만든 코드이니 실제로 아래와 같이 사용할 수 는 없고, 그런거구나.. 라고 생각해주시면 됩니다).
$('#content').toggle(
'fast',
'swing',
function() {
$('#content').focus();
}
);
#content 가 토글 되면서, 토글 작업이 완료 되면 #content 요소에 포커스를 주는 함수를 추가 한 것입니다.
toggle 함수를 실행시키는 두가지 방법
toggle 함수를 실행시키는 방법은 2가지가 있습니다. 첫번째는 HTML 태그 상에서 onclick 으로 이벤트를 받아 실행시키는 방법이고, 두번째는 스크립트 파일에 추가하는 방법입니다.
onclick 으로 toggle 실행시키기
<span id="button" onclick="$('#content')".toggle();>Toggle</span>
<div id="content">
... Contents ...
</div>
#button 을 사용자가 클릭하면(onclick) #content 에 toggle 함수를 적용시켜, 보임 상태면 숨김으로, 숨김 상태면 보임으로 알아서 바꿔줍니다.
스크립트 파일에서 toggle 실행시키기
$( '#button' ).click(
function() {
$( '#content' ).toggle();
}
);
위와 마찬가지로 #button 을 클릭하면 $content 를 토글 시키는 것입니다.
위에서 설명한 토글 작업이 완료된 후 특정 추가 작업을 실시하고자 할 때는 아무래도 스크립트 파일에서 toggle 함수를 실행시키는 편이 좋을 것 같네요.
댓글 남기기