티스토리 뷰

jQuery

.fadeIn() .fadeOut()

IT 2010. 12. 28. 11:18
.fadeIn() 은 매칭되는 요소가 불투명하게 페이딩 되는 effect 함수이다.

사용문법
.fadeIn( [ duration ], [ callback ] )
.fadeIn( [ duration ], [ easing ], [ callback ] )
 ※ duration 은 1/1000 초 단위값이다. fast 또는 slow 문자를 가질 수 있다.

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

.fadeOut()은 매칭되는 요소가 투명하게 페이딩 되는 effect 함수이다.

사용문법
.fadeOut( [ duration ], [ callback ] )
.fadeOut( [ duration ], [ easing ], [ callback ] )
 ※ duration 은 1/1000 초 단위값이다. fast 또는 slow 문자를 가질 수 있다.

사용예
<!DOCTYPE html>
<html>
<head>
  <style>
  p { font-size:150%; cursor:pointer; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <p>
  If you click on this paragraph
  you'll see it just fade away.
  </p>
<script>
  $("p").click(function () {
  $("p").fadeOut("slow");
  });
  </script>

</body>
</html>

'jQuery' 카테고리의 다른 글

.innerHeight() .innerWidth()  (0) 2010.12.28
.addClass() .removeClass()  (0) 2010.12.28
.show() .hide()  (0) 2010.12.28
.trigger()  (0) 2010.12.27
.bind()  (0) 2010.12.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/12   »
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