jQuery의 toggle() 메서드는 전등 스위치에 비유할 수 있습니다. 호출될 때마다 선택한 요소를 '켜거나' '끄는', 즉 화면에 보여주거나 숨기는 동작을 반복합니다. 이 글에서는 버튼을 클릭했을 때 toggle() 메서드로 텍스트를 숨기고 보여주는 방법을 예제와 함께 살펴보겠습니다.
jQuery toggle() 메서드란?
jQuery toggle() 메서드는 웹 페이지에서 선택한 요소를 표시하거나 숨기는 기능을 합니다. 이름 그대로 전등 스위치처럼 요소를 '켜고' '끄는' 역할을 담당합니다. 일반적으로 HTML 버튼과 함께 사용되지만, 실제로는 어떤 선택된 요소에도 적용할 수 있습니다.
단순히 표시 상태를 전환하는 것 외에도 toggle()은 지속 시간(duration) 인자를 받을 수 있습니다. 지속 시간은 숫자 또는 문자열 타입으로 지정할 수 있으며, 이 값을 넘기면 지정된 시간만큼 애니메이션이 실행됩니다.
또한 toggle()은 애니메이션이 완료된 뒤 실행될 콜백 함수도 인자로 받습니다. 콜백 함수란 다른 함수에 전달되어 나중에 실행되는 함수를 의미합니다. 아무 인자도 전달하지 않으면 toggle()은 단순히 요소의 표시 여부만 전환합니다.
그럼 기본 문법을 먼저 확인한 뒤, 예제 코드를 통해 더 자세히 알아보겠습니다. 예제에서는 사진과 텍스트 사이를 애니메이션으로 전환하는 방법까지 다룹니다.
toggle() 기본 문법
앞서 소개했듯이 toggle() 메서드는 기본적으로 전등 스위치처럼 동작합니다. 클릭하면 선택한 요소를 화면에 표시하거나 숨깁니다. 다른 jQuery 메서드와 마찬가지로 toggle()을 호출하기 전에 반드시 대상 요소를 먼저 선택해야 합니다.
먼저 인자 없이 toggle()을 사용하는 예제를 살펴보겠습니다. HTML 파일은 다음과 같습니다.
<button>
Click me
</button>
<p>
Read me!
</p>
<p id="hide" style="display: none">
NO! Read ME!
</p>
HTML 파일에는 버튼 하나와 두 개의 p 태그가 있습니다. id가 "hide"인 p 태그의 style 속성에 주목하세요. display 값을 none으로 설정하면 해당 문단 요소가 화면에서 숨겨집니다.
예상대로 화면이 렌더링되었습니다. 이제 jQuery toggle()을 사용해 숨겨진 p 태그를 화면에 나타나게 해 보겠습니다. 이번 예제에서는 jQuery 코드를 HTML 파일 안에 직접 작성하며, 이를 위해 <script> 태그로 감싸야 합니다.
<script>
$("button").click(function() {
$("#hide").toggle();
})
</script>
모든 jQuery 메서드와 마찬가지로 먼저 요소를 선택해야 합니다. 여기서는 button 요소를 선택하고 click() 메서드를 호출했습니다. click() 메서드는 선택한 버튼에 이벤트 리스너를 연결하는 역할을 하며, 버튼이 클릭되면 콜백 함수가 실행되어 그 안의 toggle() 메서드가 호출됩니다.
실제 동작 화면을 확인해 보겠습니다.
버튼을 클릭하자 숨겨져 있던 문단이 화면에 나타났습니다. 이제 toggle()의 기본 문법에 익숙해졌으니, 애니메이션을 활용한 예제를 살펴보겠습니다.
jQuery toggle() 실전 활용 – 애니메이션 예제
지금까지 toggle()로 선택한 요소를 숨기거나 보여주는 방법을 알아봤습니다. 이번에는 조금 더 복잡한 애니메이션 예제를 다뤄보겠습니다. 걱정하지 마세요. 앞서 설명한 개념만 이해했다면 충분히 따라올 수 있습니다.
이번 예제에서는 버튼, 이미지, 그리고 p 태그로 감싼 텍스트를 화면에 렌더링합니다. HTML 파일은 다음과 같습니다.
<button>
Click me
</button>
<img id="cat" src="https://images.pexels.com/photos/2256259/pexels-photo-2256259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<p style="display: none">
Animation Complete
</p>
앞선 예제와 마찬가지로 display 속성 값 때문에 문단 요소는 처음에는 숨겨져 있습니다.
고양이 사진과 버튼이 함께 렌더링되었고, p 태그의 style 속성이 "display: none"으로 설정되어 있어 텍스트는 숨겨진 상태입니다. 이제 버튼을 클릭하면 사진이 천천히 사라지고 텍스트가 나타나도록 만들어 보겠습니다.
jQuery toggle()의 지속 시간 인자는 숫자 또는 문자열을 사용할 수 있습니다. 숫자를 넘기면 밀리초 단위로 해석되며, 문자열로는 "fast"(200밀리초) 또는 "slow"(600밀리초)를 사용할 수 있습니다.
이번 예제에서는 사진을 천천히 숨기고 싶으므로 toggle()에 "slow"를 인자로 전달하겠습니다. 첫 번째 예제와 마찬가지로 jQuery 코드는 HTML 파일 하단의 script 태그 안에 작성합니다.
<script>
$('button').click(function() {
$('#cat').toggle('slow', function() {
$('p').toggle();
})
})
</script>
버튼을 선택하고 click()을 호출한 뒤, 첫 번째 콜백 함수가 고양이 사진을 숨깁니다. toggle()에 문자열 "slow"를 전달하면 추가로 콜백 함수를 넘길 수 있으며, 이 콜백 함수는 600밀리초가 지난 후에 실행됩니다.
"slow"로 지정한 시간이 지나면 문단 요소의 표시 상태가 전환되어, 사용자에게 p 태그의 텍스트가 보이게 됩니다.
움직이는 화면에서 확인할 수 있듯이 이미지가 서서히 사라지고, 그 자리를 곧바로 텍스트가 대체합니다. toggle()의 다양한 기능을 조합하면 몇 줄의 코드만으로도 동적인 애니메이션을 만들 수 있습니다.
마무리
지금까지 jQuery toggle() 메서드가 무엇이고 어떻게 동작하는지 살펴봤습니다. 기본 문법과 예제 코드를 확인했고, 배운 내용을 종합해 이미지를 활용한 간단한 애니메이션까지 구현해 봤습니다.
이제 toggle() 메서드에 익숙해졌으니 다음 프로젝트에서 요소를 자유롭게 토글해 보세요. 버튼 클릭 시 이미지에 애니메이션 효과를 추가하는 것도 가능합니다. 더 자세한 내용이 궁금하다면 공식 문서를 참고하세요. 즐거운 코딩 되세요!