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

티스토리 뷰

■ 프론트엔드 ■/jQuery

.show() - 요소보이기

serpiko 2013. 10. 13. 22:58
 .show()     

 

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

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

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

애니메이션 효과없이 요소를 바로 보이게 하는 기능. 마치 .css('display','block')의 사용과 비슷.

duration값을 가지게 되면, .show() 함수도 애니메이션 효과를 가지게 된다.

.show() 함수는 요소의 width, height, opacity를 동시에 조작하게 된다.

Durarion의 단위는 밀리세컨드이고, 'fast일경우 200, 'slow'일경우 600 밀리세컨드 단위이다.

 

예제) 숨겨진 모든 p 태그를 천천히 나타나게한다. 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 
<!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들이 보임. 각각의 애니메이션은 이전 형제요소의 움직임이 끝날 때 시작하게 된다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
<!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>

 

결과) 

 

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

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

position() - 상대좌표 구하기  (0) 2013.10.13
.hide() - 요소감추기  (0) 2013.10.13
xml - 파싱2  (0) 2013.10.13
.html() - 일치요소 내부에 html 문자열 추가  (0) 2013.10.13
.eq(index)  (0) 2013.10.13
댓글