jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate

.animate()는 애니메이션 효과를 만듭니다.

문법

.animate( properties [, duration ] [, easing ] [, complete ] )

properties

애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다.

  • backgroundPositionX
  • backgroundPositionY
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderSpacing
  • borderTopWidth
  • borderWidth
  • bottom
  • fontSize
  • height
  • left
  • letterSpacing
  • lineHeight
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • opacity
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • right
  • textIndent
  • top
  • width
  • wordSpacing

duration

  • 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
  • fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.

easing

  • 애니메이션 효과의 방식을 정합니다.
  • swing과 linear이 가능하며, 기본값은 swing입니다.

complete

요소가 사라진 후 수행할 작업을 정합니다.

예제 1

버튼을 클릭하면 파란색 div 요소의 가로 크기가 변합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      #a {
        width: 10%;
        height: 100px;
        background-color: #bbdefb;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( '#a' ).animate( {
            width: '100%'
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button>Click!</button></p>
    <div id="a"></div>
  </body>
</html>

예제 2

swing과 linear를 비교한 예제입니다. linear는 일정한 속도로 진행합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      div {
        margin: 10px 0px;
        width: 10%;
        height: 100px;
        background-color: #e3f2fd;
      }
      #a { background-color: #bbdefb; }
      #b { background-color: #ffcdd2; }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( '#a' ).animate( {
            width: '100%'
          }, 2000, 'swing' );
          $( '#b' ).animate( {
            width: '100%'
          }, 2000, 'linear' );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button>Click!</button></p>
    <div id="a"></div>
    <div id="b"></div>
  </body>
</html>

예제 3

div 요소가 커지는 애니메이션을 마친 후, 사라지는 애니메이션을 실행합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      #a {
        width: 10%;
        height: 100px;
        background-color: #bbdefb;
      }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button' ).click( function() {
          $( '#a' ).animate( {
            width: '100%'
          }, 1000, function() {
            $( this ).animate( {
              width: '0%'
            }, 1000 );
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button>Click!</button></p>
    <div id="a"></div>
  </body>
</html>

Related Posts

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

jQuery / Method / .slice() - 일치하는 요소의 일부분만 선택하는 메서드

.slice() .slice()는 일치하는 요소의 일부분만 선택합니다. 문법 .slice( start ) 예를 들어 $( 'li' ).slice( 2 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 빨간색으로 만듭니다. $( 'li' ).slice( 2, 5 ).css( 'color', 'red' ); 는 li 요소 중 3번째부터 5번째까지 빨간색으로 만듭니다. $( 'li' ).slice( -4, -2 ).css( 'color', 'red' ); 는 li 요소 중 ...

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

jQuery / HTML 문서와 연결하는 방법, 사용하는 방법

HTML 문서와 연결하기 CDN 이용하기 HTML 문서에 다음 코드를 추가합니다. <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> 3.3.1은 버전입니다. 다른 버전을 사용하고 싶다면 숫자를 변경합니다. 다운로드 받아 연결하기 jQuery 다운로드는 여기에서 합니다. 압축된 파일도 있고, 압축되지 않은 파일도 있습니다. 그리고 HTML 문서에 다음 코드를 추가합니다. <script src="path/jquery-3.3.1.min.js"></script> path와 파일 이름은 적절히 변경합니다. jQuery 사용하기 다음은 ID가 jb인 h1 요소의 색을 빨간색으로 바꾸는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta ...

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

jQuery / 맨 위로 부드럽게 이동하는 링크 만들기

사이트의 메뉴는 보통 맨 위에 있습니다. 내용이 긴 문서를 읽은 후 다시 메뉴로 가려면 한참 스크롤을 해야 하는 불편이 있습니다. 이 불편을 없애기 위해 맨 위로 가는 링크를 제공하는 곳이 많습니다. 단순한 링크로 만들면 순식간에 맨 위로 이동하는데, jQuery의 scrollTop()을 이용하면 맨 위로 스르륵 올라가는 효과를 쉽게 만들 수 있습니다. HTML 문서에 ...

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

jQuery / Method / .has() - 특정 요소를 가지고 있는 요소를 선택하는 메서드

.has() .has()로 특정 요소를 가지고 있는 요소를 선택할 수 있습니다. 문법 .has( selector ) 예를 들어 $( 'h1' ).has( 'span' ) 은 span 요소를 가지고 있는 h1 요소를 를 선택합니다. 예제 span 요소를 포함하고 있는 h1 요소의 글자색을 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> ...

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

jQuery / Method / .click() - 선택한 요소를 클릭했을 때 특정 작업을 하는 메서드

.click() .click()은 선택한 요소를 클릭했을 때 특정 작업을 수행할 수 있게 하는 속성입니다. 문법 .click( handler ) 예를 들어 button 요소를 클릭했을 때 함수를 실행시키고 싶으면 다음과 같이 합니다. $( 'button' ).click( function() { // function } ); 예제 문단을 클릭하면 테두리가 생깁니다. 다시 클릭하면 테두리가 사라집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

jQuery / Method / .not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택하는 메서드

.not() .not()은 선택한 요소 중 특정 선택자를 제외한 요소를 선택합니다. 문법 .not( selector ) 예를 들어 $( 'p' ).not( 'p.abc' ).css( 'color', 'green'); 은 p 요소 중 abc를 클래스 값으로 가지지 않은 것을 선택합니다. 예제 버튼을 클릭하면 클래스 값으로 ip를 갖지 않는 li 요소의 내용을 빨간색으로 바꿉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

jQuery / Selector / :contains() - 특정 문자열을 포함한 요소를 선택하는 선택자

:contains() :contains()는 특정 문자열을 포함한 요소를 선택하는 선택자입니다. 문법 $( ':contains(text)' ) 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의합니다. 예를 들어 $( 'p:contains("ab")' ) ab 문자열을 포함한 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script> ...

jQuery / Plugin / jQuery Smooth Scroll

jQuery / Plugin / jQuery Smooth Scroll

jQuery Smooth Scroll jQuery Smooth Scroll은 HTML 내에서 링크를 클릭하여 이동할 때, 부드럽게 이동하도록 만들어주는 플러그인입니다. GitHub : https://github.com/kswedberg/jquery-smooth-scroll Download : https://github.com/kswedberg/jquery-smooth-scroll/archive/master.zip 기본 사용법 다음처럼 문서 내에서 이동하는 링크를 가진 HTML 문서를 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> body { font-family: Consolas, sans-serif; } a { color: blue; } p { margin-bottom: 800px; } </style> </head> <body> <ul> <li><a href="#ipsum">Ipsum</a></li> <li><a href="#dolor">Dolor</a></li> </ul> <h1>Lorem</h1> <p>Lorem ipsum dolor sit amet, ...

jQuery 강좌