Main menu

jQuery UI 강좌 | Effects > .addClass()

설명

jQuery UI의 .addClass()는 jQuery의 .addClass()에 애니메이션 효과를 추가한 것입니다.

문법

.addClass( className [, duration ] [, easing ] [, complete ] )

className

추가하려는 클래스 값을 넣습니다. 여러 개의 클래스 값을 추가할 때는 각 값을 띄어쓰기로 구분합니다.

duration

애니메이션 효과가 시작해서 끝날 때까지의 시간을 정합니다. 숫자, fast, slow를 넣을 수 있습니다.

숫자일 때의 단위는 1/1000초이고, fast는 200, slow는 600에 해당합니다.

easing

애니메이션 효과를 정합니다.

사용 가능한 값은 http://api.jqueryui.com/easings/를 참고하세요.

complete

애니메이션 효과가 끝난 후 실행할 작업을 정할 수 있습니다.

예제 1

페이지가 로딩된 후 애니메이션 효과와 함께 박스가 커지는 예제입니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-addClass-01.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Coding Factory</title>
    <style>
      .jb {
        width: 50%;
        padding: 30px 0px;
        background-color: #2196F3;
        text-align: center;
        color: #ffffff;
      }
      .jb-big {
        width: 100%;
        padding: 80px 0px;
        background-color: #0D47A1;
      }
    </style>
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      jQuery( document ).ready( function() {
        $( '.jb' ).addClass( 'jb-big', 2000, 'easeOutBounce' );
      } );
    </script>
  </head>
  <body>
    <div class="jb">
      <h1>Lorem</h1>
    </div>
  </body>
</html>

예제 2

애니메이션이 끝난 후 텍스트를 출력하는 예제입니다.

http://example.codingfactory.net/jquery-ui/jquery-ui-addClass-02.html

$( '.jb' ).addClass( 'jb-big', 2000, 'easeOutBounce', function() {
  $( 'body' ).append( '<h2>addClass is completed.</h2>' );
} );

이 글을 공유하기

Kakao