hide(), 요소 숨기기

hide

.hide( )Returns : jQuery

개요 : 일치하는 요소를 숨깁니다.

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

인자없이 .hide() 형태로 사용하는 것이 가장 간단한 사용법 입니다.

$('.target').hide();

기본 사용법은 애니메이션 효과가 없이 요소를 바로 숨기는 기능을 합니다. 이것은 대략적으로 .css('display', 'none') 의 사용과 비슷하지만, 숨길때 display 속성값을 jQuery 의 데이터 캐쉬에 저장 해두었다가 나중에 display 를 초기값으로 복원해줍니다. 만일 요소의 display 스타일 속성값이 inline 이었다면, 숨긴 후 다시 보여질 때 display 속성값이 inline 으로 복원된다는 의미입니다.

시간값(duration) 인자를 설정하면, .hide() 함수는 애니메이션 효과를 가지게 됩니다. .hide() 함수는 요소의 width, height, 그리고 투명도(opacity) 를 동시에 조작하게 됩니다. 이 속성들의 값이 0 에 도달하면, display 스타일 속성값은 none 이 되고 해당 요소는 화면 레이아웃에 더 이상 영향을 주지 못합니다. (영역 자체가 사라진다는 의미인 것 같습니다.)

시간값(Duration)의 기본값은 밀리세컨드이고, 값이 크면 느린 효과가 나타납니다. 물론 반대는 빨라지겠죠. 'fast' 와 'slow' 문자열을 지원하는데, 각각은 200 과 600 밀리세컨드를 의미합니다.

jQuery 1.4.3 버전에 와서, easing 함수를 사용할 수 있는 문자열을 사용할 수 있게 되었습니다. Easing 함수란 스피드를 조작하여 특별한 효과를 나타나게 하는 함수를 의미합니다. jQuery 가 기본적으로 가지고 있는 easing 표현은 swing 과 linear 입니다. 더 많은 easing 효과들이 궁금하시면 jQuery UI suite를 방문하세요. 단, easing 함수는 플러그인 이므로 관련된 라이브러리를 포함해야 사용이 가능합니다.

콜백 함수를 인자로 사용하면 애니메이션 효과가 완료되면 해당 콜백함수가 실행됩니다. 연속적으로 다른 애니메이션 효과를 추가할 때 유용한 사용법입니다. 단, 콜백 함수는 this 키워드 말고는 인자 전달이 불가합니다. this 키워드는 움직이 있었던 DOM 요소를 의미합니다. 만일 여러개의 요소를 움직인다면, 중요하게 고려해야 할 사항이 있는데 콜백함수는 각 요소의 효과가 끝날때마다 호출 된다는 것입니다.

이미지를 예로 보겠습니다.

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123" />
With the element initially shown, we can hide it slowly:
$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

.hide() 를 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.

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

<!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>

미리보기

아주 간단하지만 엑기스인 예제입니다.

예 제
버튼을 클릭하면 애니메이션 효과가 적용되어 숨겨집니다. 'slow' 즉, 600 밀리세컨드 기준입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { background:#dad; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Hide 'em</button>

  <p>Hiya</p>
  <p>Such interesting text, eh?</p>
<script>
    $("button").click(function () {
      $("p").hide("slow");
    });    
</script>

</body>
</html>

미리보기

보통은 이런식으로 클릭하면 뭔가 발생하는 내용이 많겠죠.

예 제
숨기고 보이고 처리입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { background:#def3ca; padding:3px; float:left; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="hidr">Hide</button>
  <button id="showr">Show</button>
  <div>

    <span>Once</span> <span>upon</span> <span>a</span> 
    <span>time</span> <span>there</span> <span>were</span> 
    <span>three</span> <span>programmers...</span>

  </div>
<script>
    $("#hidr").click(function () {
      $("span:last-child").hide("fast", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("fast", arguments.callee); 
      });
    });
    $("#showr").click(function () {
      $("span").show(2000);
    });

</script>

</body>
</html>

미리보기

와우 멋지게 사라지네요. 그닥 유용해 보이진 않지만요. ^^;;

예 제
클릭한 요소가 사라집니다. 사라진 요소는 제거됩니다. 파바박하고 여러개를 빠르게 클릭해 보세요.

<!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>

미리보기

스르르륵 하고 순서대로 사라집니다. 괜찮네요.

요즘 웹 어플은 숨기고 보이고는 정말 많이 사용하는 내용이죠. 잘 활용하세요.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.

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

'프로그래밍 > jQuery' 카테고리의 다른 글

slideToggle(), 슬라이드 토글하기 (1)	2012.04.25
slideDown(), 슬라이드 효과로 보이기 (0)	2012.04.25
show(), 요소 보이게 하기 (0)	2012.04.25
queue(), 대기열의 함수와 대기열 조작하기 (0)	2012.04.25
jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (0)	2012.04.19
jQuery.fx.interval, 에니메이션 프레임 조절 (0)	2012.04.16
fadeToggle(), 페이드 인/아웃 토글 (0)	2012.04.16
fadeTo(), 투명도를 조절하기 (0)	2012.04.16

즐거움을 찾자 Find Fun!!

hide(), 요소 숨기기

'프로그래밍 > jQuery' 카테고리의 다른 글

티스토리툴바

hide(), 요소 숨기기

'프로그래밍 > jQuery' 카테고리의 다른 글

관련글

티스토리툴바