이 포스트에서는 jQuery의 show, hide 효과에 대해 알아보겠습니다. jQuery를 사용하면 show(), hide() 메소드를 통해 HTML 항목을 보이게 또는 숨길 수 있습니다.
jQuery hide()
jQuery hide() 메소드는 선택한 HTML 항목을 숨깁니다. 다음은 제목을 누르면 제목이 숨겨지는 예제입니다. index.html에 다음 코드를 입력하고 실행합니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery hide() 예제</h2>
<p>h2 태그의 제목을 누르면 숨겨집니다.</p>
<h2>두 번째 h2 제목</h2>
<script>
$("h2").click(function () {
$(this).hide();
});
</script>
</body>
</html>index.html을 실행하면 다음과 같은 화면이 나타납니다.
먼저 위 쪽 제목을 눌러보면 위 쪽 제목이 사라집니다.
그 다음 아래 쪽에 있는 제목을 클릭하면 아래 쪽 제목도 숨겨집니다.
코드를 살펴보면 ${"h2").click()의 매개변수인 커스텀 함수에 $(this).hide() 메소드를 호출 했습니다. 이느 각각의 h2 태그에 클릭 이벤트가 발생한 경우 커스텀 함수를 실행하라는 의미인데 커스텀 함수 내에 자기 자신을 숨기는 코드가 포함되어있습니다.
jQuery show(), hide() 예제
다음은 두개의 버튼에 hide와 show를 할당하여 각각의 버튼을 클릭하여 문장을 숨기고 보이게 하는 예제입니다.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<h2>jQuery show, hide 예제</h2>
<p>아래 버튼을 누르면 문장이 숨겨지고 보입니다.</p>
<button id="hide">hide</button>
<button id="show">show</button>
<script>
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show();
});
</script>
</body>
</html>다음은 실행 결과입니다.
hide 버튼을 클릭하면 다음의 그림 처럼 문장이 숨겨집니다.
여기서 show 버튼을 클릭하면 숨겨졌던 문장을 다시 보입니다.
hide 버튼에서 클릭이벤트가 발생하면 $("P").hide()가 실행되어 문장이 숨겨지도록 되어있습니다. 반대로 show 버튼을 클릭한 경우 $("p").show()가 실행되어 문장이 보입니다.
속도 매개변수와 jQuery show(), hide()
위의 예제에서는 hide(), show() 메소드를 매개변수 없이 호출했습니다. 하지만 이 메소드에도 매개변수를 전달할 수 있습니다. 예를 들면 속도 값을 밀리세컨드 단위로 전달할 수 있습니다.
$("#hide").click(function() {
$("p").hide(2000);
});
$("#show").click(function() {
$("p").show(3000);
});앞에서 설명했던 코드를 위의 예제와 같이 수정하면 hide 버튼을 클릭 한 경우 문장이 완벽하게 숨겨지는데 2000 밀리세컨드가 소요됩니다. 여기서 완전히 숨겨진다는 의미는 2초 동안 서서히 사라진다는 말입니다. 같은 방법으로 show 버튼을 클릭하면 3000 밀리세컨드 동안 문장이 서서히 보이게 됩니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [jquery] 자바스크립트 클래스 이름 확인하기 (0) | 2022.10.07 |
|---|---|
| [jquery] 자바스크립트 클래스 이름 추가하기 (0) | 2022.10.06 |
| [jquery] 자바스크립트 버튼 클릭 (2) | 2022.10.05 |
| [javascript] 자바스크립트 팩토리얼 계산하기 (factorial) (2) | 2022.09.29 |
| [javascript] 자바스크립트 자판기 만들기 (0) | 2022.09.28 |
댓글