공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday

티스토리 뷰

■ 프론트엔드 ■/jQuery

.hide() - 요소감추기

serpiko 2013. 10. 13. 23:00
  .hide( )      

 

  • .hide()
  • .hide( duration [, callback] ) : duration 시간 값, callback 콜백 함수
  • .hide( [duration] [, easing] [, callback] ) : duration 시간 값, easing 특수한 효과 함수, callback 콜백 함수

    •  

    인자없이 $('.target').hide(); 와 같은 형태로 쓰는것이 가장 간단한 사용법.

    기본 사용법은 애니메이션 효과 없이 요소를 바로 숨기는 기능을 한다.

    .css('display', 'none')의 사용과 비슷하다. duration 인자를 성정하면 애니메이션 효과를 가지게 된다.

     

    예제) 모든 p 태그를 숨기고 클릭한 요소도 숨깁니다.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    		 
    <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p>
  <a href="#">Click to hide me too</a>
  <p>Here is another paragraph</p>
<script>
    $("p").hide();
    $("a").click(function ( event ) {
      event.preventDefault();
      $(this).hide();
    });
</script>

</body>
</html>

     

    결과)

     

     

     

    예제) 클릭한 요소가 사라짐.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
    		 
    <!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#ece023; width:30px; 
        height:40px; margin:2px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
<script>
    for (var i = 0; i < 5; i++) {
      $("<div>").appendTo(document.body);
    }
    $("div").click(function () {
      $(this).hide(2000, function () {
        $(this).remove();
      });
    });
</script>

</body>
</html>

     

    결과)

     

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

    '■ 프론트엔드 ■ > jQuery' 카테고리의 다른 글

    .animate - 딜레이와 움직임  (0) 2013.10.13
    position() - 상대좌표 구하기  (0) 2013.10.13
    .show() - 요소보이기  (0) 2013.10.13
    xml - 파싱2  (0) 2013.10.13
    .html() - 일치요소 내부에 html 문자열 추가  (0) 2013.10.13
    댓글