jQuery - hide() 메서드, 실행 후 다른 코드 실행 (callback)

2022. 5. 9. 11:40

▶ hide 메서드

💻 예제 설명

jQuery에서 선택한 요소를 hide() 메서드로 이용을 하면 요소가 숨겨진다.

이 메서드는 속도 속성과 callback을 사용할 수가 있는데,

일반적인 요소 숨기는 사용방법, 요소를 숨기고 다른 무언가를 행동을 할 때 사용하는 방법을 알아보자.

Syntax

$('선택요소').hide();
$('선택 요소'). hide(speed, callback);

이렇게 2가지 방법을 아래 예제를 통해서 확인해보자.

속성 옵션을 사용하면 좀 더 세밀하게 또는 좀 더 고급진 제어가 가능하다.

속성옵션 사용법 보러가기 ☜

🖥 소스 예제

1) $('선택 요소').hide();

1 - 1) 사용법 Syntax

 // 사용법
 $("div").hide();

1 - 2) 예제

<!DOCTYPE html>
<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <style>
        div{
          width:100px;
          height:100px;
          background-color:red;
        }
      </style>

      <script>
      
          $(document).ready(function(){
            $("button").click(function(){
              $("div").hide();       
            });
          });
          
      </script>
    </head>

    <body>
      <button>hide 버튼</button>
      <hr>
      <div></div>
    </body>

</html>

2) $('선택 요소').hide(speed, callback);

speed : 이 부분은 'slow', 'fast', 숫자(밀리 세컨즈 1000 = 1초)
callback : hide 메서드가 실행이 완료가 된 후 callback이라는 함수를 실행.

2 - 1) 사용법 Syntax

// speed : 'fast', 'slow', 밀리세컨즈(1000 = 1초)

$("div").hide(1000, function(){
	alert('div 요소가 hide가 완료 된 후 이 alert 메세지가 나옵니다.');
});

2 - 2) 예제

<!DOCTYPE html>
<html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <style>
        div{
          width:100px;
          height:100px;
          background-color:red;
        }
      </style>

      <script>
      
          $(document).ready(function(){
            $("button").click(function(){
              $("div").hide('slow', function(){
              	alert('div 요소가 hide가 완료 된 후 이 alert 메세지가 나옵니다.');
                // 요소가 완전히 숨겨진 이후 실행되는 부분으로써 개발자가 이 후 코드를 넣는 곳
              });       
            });
          });
          
      </script>
    </head>

    <body>
      <button>hide 버튼</button>
      <hr>
      <div></div>
    </body>

</html>

💻 예제 구동 설명

1-2) 예제 ☜

hide 버튼을 클릭하면 width : 100px, height : 100px, background : red 인 요소가 숨겨진다.

2-2) 예제 ☜

hide 버튼을 클릭하면 width : 200, height : 200, background : red 인 요소가 숨겨진 후에

결과 화면에서 보이는 것처럼 chrome의 브라우저의 alert 창이

"div 요소가 hide가 완료된 후 이 alert 메시지가 나옵니다."라는 alert창이 뜬다.

즉, 요약하자면 요소를 hide 메서드로 인해 완전히 숨겨진 뒤에

callback 함수를 실행시킨다.

결과적으로 요소가 다 숨겨진 이후에 함수를 실행시킴으로써 개발자가 그다음 코드를 넣어서 개발하면 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - toggle() 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.11
jQuery - show() 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.10
jQuery - p 태그로 구분되어진 문단을 버튼으로 스크롤하기 (0)	2022.04.12
jQuery - offset() 메서드 사용법 (0)	2022.03.25
jQuery - position() 메서드 / 위치값은 어떻게 어떤 이유로 계산되어져 반환받는가 (0)	2022.03.24

열공의 기록