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

jQuery
Created 2020-03-14 Last Modified 2020-11-18

.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>

jQuery

jQuery / Method / .slideDown() - 요소를 아래쪽으로 나타나게 하는 메서드

.slideDown() .slideDown()은 선택한 요소를 아래쪽으로 서서히 나타나게 합니다. 문법 .slideDown( ) duration 요소가 나타날 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타난 후 수행할 작업을 정합니다. 예제 1 버튼을 클릭하면 파란색 배경의 div ...

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 / 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 / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Plugin / AOS / 스크롤하면 애니메이션 효과와 함께 나타나는 요소 만드는 라이브러리

AOS 세로로 긴 웹 페이지가 있습니다. 화면을 벗어나는 경우 스크롤하면 밑에 있는 콘텐츠를 볼 수 있습니다. 그 보여지는 콘텐츠에 애니메이션 효과를 주는 라이브러리가 AOS(Animate on scroll library)입니다. 나타나기, 회전하기, 확대하기 등 다양한 효과를 제공합니다. Fade animations fade, fade-up, fade-down, fade-left, fade-right, fade-up-right, fade-up-left, fade-down-right, fade-down-left Flip animations flip-up, flip-down, flip-left, flip-right Slide animations slide-up, slide-down, slide-left, slide-right Zoom animations zoom-in, ...

jQuery / Method / .after() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

개요 .after()는 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시킬 수 있다. 문법 문법은 다음과 같다. .after( content ) 예를 들어 다음은 h1 요소 뒤에 Hello를 내용으로 갖는 p 요소를 추가한다. $( 'h1' ).after( '<p>Hello</p>' ); 다음은 클래스 값으로 a를 갖는 h1 요소 뒤에 클래스 값으로 b를 갖는 p 요소를 이동시킨다. $( 'h1.a' ...

jQuery / Method / .insertAfter() - 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동시키는 메서드

.insertAfter()는 특정 요소 뒤에 요소를 추가 또는 이동한다. 문법 h1 요소 뒤에 <p>World</p>를 추가한다. $( '<p>World</p>' ).insertAfter( 'h1' ); h1 요소 뒤로 p 요소를 이동한다. $( 'p' ).insertAfter( 'h1' ); 예제 1 h1 요소 뒤에 <p>World</p>를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / 특정 요소를 자식 요소로 갖지 않는 요소 선택하는 방법

특정 요소를 자식 요소로 갖는 요소를 선택하는 방법 jQuery의 :has 선택자를 이용해서 특정 요소를 자식 요소로 갖는 요소를 선택할 수 있습니다. 예를 들어 $( 'p:has( span )' ).css( 'color', 'red' ); 는 span 요소를 자식 요소로 갖고 있는 p 요소의 색을 빨간색으로 만듭니다. 특정 요소를 자식 요소로 갖지 않는 요소를 선택하는 방법 특정 요소를 자식 요소로 ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

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

:contains()는 특정 문자열을 포함한 요소를 선택하는 선택자이다. 문법 문자열 포함 여부를 따질 때 대소문자를 구분한다는 점에 주의한다. $( ':contains( text )' ) 예를 들어 다음은 ab 문자열을 포함한 p 요소를 선택한다. $( 'p:contains( "ab" )' ) 예제 jb를 포함한 p 요소를 선택해서 글자를 빨간색으로 만든다. 첫번째 문단은 jb가 없어서, 세번째 문단은 jb가 있지만 대문자여서 선택되지 않는다. <!doctype html> <html lang="ko"> ...