show(), 요소 보이게 하기

show

.show( )Returns : jQuery

개요 : 일치하는 요소를 보이게 합니다.

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

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

$('.target').show();

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

Note: 만일 아래와 같이 스타일시트에 !important 가 사용되었다면,

display: none !important

.css('display', 'block !important') 코드를 추가해야 .show() 함수 사용 시 원하는 결과를 얻게 됩니다.

시간값(duration) 인자를 설정하면, .show() 함수는 애니메이션 효과를 가지게 됩니다. .show() 함수는 요소의 width, height, 그리고 투명도(opacity) 를 동시에 조작하게 됩니다.

시간값(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" />

$('#clickme').click(function() {
  $('#book').show('slow', function() {
    // Animation complete.
  });
});

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

예 제
숨겨진 모든 p 태그를 천친히 나타나게 합니다. 'slow' 는 600 millisecond 입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
      p { background:yellow; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Show it</button>

      <p style="display: none">Hello  2</p>
<script>
    $("button").click(function () {
    $("p").show("slow");
    });
    </script>

</body>
</html>

미리보기

가장 범용적인 예제일겁니다. 간단하지만 중요하네요.

예 제
첫번째 div 가 보여지고 순서에 따라 다음번 div 들이 보여집니다. 200 밀리세컨드가 적용되었으며, 각각의 애니메이션은 이전 형제요소의 움직임이 끝날 때 시작되게 됩니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  div { background:#def3ca; margin:3px; width:80px;
  display:none; float:left; text-align:center; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
  <button id="showr">Show</button>
  <button id="hidr">Hide</button>
  <div>Hello 3,</div>

  <div>how</div>
  <div>are</div>
  <div>you?</div>
<script>
$("#showr").click(function () {
  $("div").first().show("fast", function showNext() {
    $(this).next("div").show("fast", showNext);
  });
});

$("#hidr").click(function () {
  $("div").hide(1000);
});
</script>

</body>
</html>

미리보기

순차적인 움직임이 필요할 때 써야 겠네요.

예 제
span과 input 요소를 나타나게 하고, input에 특정한 키워드를 쓰면 추가적인 내용이 보여지게 됩니다. 여기서는 submit이 되도록 처리되었네요.

<!DOCTYPE html>
<html>
<head>
  <style>
  span { display:none; }
  div { display:none; }
  p { font-weight:bold; background-color:#fcd; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
  <form>
    <input type="text"  value="as;ldkfjalsdf"/>
  </form>
</div>
<p style="display:none;">I'm hidden...</p>

<script>
function doIt() {
  $("span,div").show("slow");
}
/* can pass in function name */
$("button").click(doIt);

$("form").submit(function () {
  if ($("input").val() == "yes") {
    $("p").show(4000, function () {
      $(this).text("Ok, DONE! (now showing)");
    });
  }
  $("span,div").hide("fast");
  /* to stop the submit */
  return false;
});
</script>

</body>
</html>

미리보기

yes 를 쓰면 폼이 서브밋되고 아니면 입력 부분이 사라지네요. 요것도 나름 유용할 것 같습니다.

아마 이전에 작성한 hide() 와 이번의 show() 는 자웅동체 겠네요. 언제나 거의 대부분 같이 사용될겁니다. ^^;; 그보단 toggle()이 더 많이 사용되겠지만요. ㅎㅎ

그럼 즐프하세요.

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

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

jQuery .stop(), 애니메이션 효과 멈춤 (0)	2012.05.08
slideUp(), 슬라이드 효과로 숨기기 (0)	2012.04.25
slideToggle(), 슬라이드 토글하기 (1)	2012.04.25
slideDown(), 슬라이드 효과로 보이기 (0)	2012.04.25
queue(), 대기열의 함수와 대기열 조작하기 (0)	2012.04.25
hide(), 요소 숨기기 (2)	2012.04.19
jQuery.fx.off, 전체 애니메이션 효과 전역 설정 (0)	2012.04.19
jQuery.fx.interval, 에니메이션 프레임 조절 (0)	2012.04.16

즐거움을 찾자 Find Fun!!

show(), 요소 보이게 하기

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

티스토리툴바

show(), 요소 보이게 하기

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

관련글

티스토리툴바