0Pricing
jQuery Academy · 강의

애니메이션 연결 및 대기열 관리

여러 애니메이션 메서드를 연결하고 애니메이션 대기열을 관리해 동적 인터페이스를 위한 순차적이고 조화로운 시각 효과를 만드는 방법을 살펴봅니다.

애니메이션 연결 및 대기열 관리은(는) CoddyKit의 무료 jQuery Academy 강의입니다. 이것은 3개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 jQuery Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

애니메이션 연결 소개

요소를 움직인 다음 색상을 바꾸고 페이드 아웃하고 싶다고 생각해 보세요. 이 작업을 하나씩 직접 수행하면 까다로울 수 있습니다!

jQuery의 애니메이션 연결을 사용하면 여러 애니메이션 메서드를 서로 연결할 수 있습니다. 각 애니메이션은 이전 애니메이션이 완료된 후에만 시작되므로 부드럽고 순차적인 효과가 만들어집니다.

기본 연결 문법

jQuery 메서드는 대개 jQuery 객체 자체를 반환합니다. 따라서 결과에 다른 메서드를 바로 호출하여 '연결'을 만들 수 있습니다.

여기서는 상자가 오른쪽으로 이동한 다음 아래로 이동합니다. 실행해 보세요!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 1000) // Move right
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

복잡한 순서 만들기

여러 애니메이션 메서드를 함께 연결할 수 있습니다. jQuery는 이러한 애니메이션을 내부 대기열에 자동으로 넣어 정의한 순서대로 실행되도록 합니다.

이렇게 하면 사용자 인터페이스 요소에 순차적인 흐름이 만들어집니다. 상자가 이동한 다음 커지고 페이드 아웃되는 모습을 확인해 보세요!

<!DOCTYPE html>
<html>
<head>
<title>Complex Chaining</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .animate({height: '100px', width: '100px'}, 600)
          .animate({opacity: 0.5}, 500)
          .animate({top: '100px'}, 700)
          .fadeOut(500); // Fades out completely
      });
    });
  </script>
</body>
</html>

애니메이션 대기열의 작동 방식

애니메이션 메서드를 연결해도 jQuery는 모두 동시에 실행하지 않습니다. 대신 애니메이션을 애니메이션 대기열(또는 'fx' 대기열)이라는 특별한 목록에 추가합니다.

  • 첫 번째 애니메이션은 즉시 시작됩니다.
  • 이후 애니메이션은 대기열에서 기다립니다.
  • 애니메이션이 완료되면 jQuery가 대기열에서 다음 애니메이션을 자동으로 가져와 시작합니다.

따라서 애니메이션이 순차적이고 예측 가능하게 실행됩니다.

.delay()로 일시 중지 추가하기

때로는 애니메이션 사이에 잠시 멈춰야 합니다. 이때 .delay() 메서드가 적합합니다! 지정한 시간 동안 애니메이션 대기열에 있는 이후 항목의 실행을 일시 중지합니다.

상자가 이동하고 잠시 멈춘 다음 다시 이동합니다.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Delay</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: purple;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Animation</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800) // Move right
          .delay(1000) // Pause for 1 second
          .animate({top: '50px'}, 800); // Move down
      });
    });
  </script>
</body>
</html>

대기열에서 사용자 지정 코드 실행하기

.queue()를 사용하면 애니메이션이 아닌 함수를 대기열에 직접 삽입할 수 있습니다. 이를 통해 애니메이션 사이에 정확히 원하는 동작(예: 텍스트 변경 또는 클래스 추가)을 수행할 수 있습니다.

함수는 대기열에서 차례가 되었을 때 실행됩니다. 사용자 지정 함수 안에서 next()를 호출하여 jQuery에 대기열의 다음 항목으로 이동하라고 알려야 합니다!

<!DOCTYPE html>
<html>
<head>
<title>Custom Queue Function</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: orange;
    position: relative;
    left: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <p id="status">Ready</p>
  <button id="startAnimation">Start Sequence</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 800)
          .queue(function(next) { // Add custom function to queue
            $(this).css("background-color", "blue");
            $("#status").text("Color changed!");
            next(); // Crucial: tells jQuery to proceed
          })
          .animate({top: '50px'}, 800)
          .queue(function(next) {
            $("#status").text("Animation done!");
            next();
          });
      });
    });
  </script>
</body>
</html>

.stop()으로 애니메이션 중단하기

애니메이션을 중간에 멈추고 싶다면 어떻게 해야 할까요? .stop() 메서드를 사용하면 됩니다. 이 메서드는 요소에서 현재 실행 중인 애니메이션을 중지할 수 있습니다.

  • .stop(true): 현재 애니메이션을 중지하고 전체 애니메이션 대기열을 지웁니다.
  • .stop(false, true): 현재 애니메이션을 중지하고 끝 상태로 바로 이동하지만 대기열은 지우지 않습니다.

신중하게 사용하세요. 계획한 순서를 방해할 수 있습니다!

<!DOCTYPE html>
<html>
<head>
<title>jQuery Stop</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: teal;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start</button>
  <button id="stopAnimation">Stop (clear queue)</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 2000)
          .animate({top: '100px'}, 2000)
          .animate({left: '0px'}, 2000);
      });

      $("#stopAnimation").on("click", function() {
        $("#myBox").stop(true, false); // Stop current, clear queue, don't jump to end
      });
    });
  </script>
</body>
</html>

.finish()로 애니메이션 끝으로 건너뛰기

.finish() 메서드는 요소에서 현재 실행 중인 모든 애니메이션을 즉시 완료하고 애니메이션 대기열을 지우는 강력한 방법입니다.

  • 모든 애니메이션에 .stop(true, true)를 호출하는 것과 비슷합니다.
  • 요소는 대기열에 있던 모든 애니메이션의 최종 상태로 즉시 이동합니다.

이는 '초기화' 버튼을 만들거나 요소를 최종 애니메이션 상태로 빠르게 전환할 때 유용합니다.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Finish</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: darkblue;
    position: relative;
    left: 0px;
    top: 0px;
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Long Chain</button>
  <button id="finishAnimation">Finish All</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .animate({left: '150px'}, 3000)
          .animate({top: '100px'}, 3000)
          .animate({width: '100px'}, 3000);
      });

      $("#finishAnimation").on("click", function() {
        $("#myBox").finish(); // Instantly jump to final state
      });
    });
  </script>
</body>
</html>

다양한 효과 연결하기

연결은 .animate()에만 사용할 수 있는 것이 아닙니다! .fadeIn(), .slideUp(), .slideToggle() 등 다양한 jQuery 애니메이션 메서드도 연결할 수 있습니다.

이 메서드들도 동일한 애니메이션 대기열을 사용하므로 복잡한 시각적 순서를 쉽게 만들 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<title>Mixed Animation Chain</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  .box {
    width: 80px;
    height: 80px;
    background-color: #3498db;
    margin-bottom: 10px;
    display: none; /* Start hidden */
  }
</style>
</head>
<body>
  <div class="box" id="myBox"></div>
  <button id="startAnimation">Start Mixed Chain</button>

  <script>
    $(document).ready(function() {
      $("#startAnimation").on("click", function() {
        $("#myBox")
          .fadeIn(500) // Fade in
          .delay(500) // Pause
          .slideUp(500) // Slide up
          .delay(500) // Pause
          .slideDown(500) // Slide down
          .animate({width: '120px', height: '120px'}, 700); // Grow
      });
    });
  </script>
</body>
</html>

빠른 연결 확인

다음 jQuery 코드를 살펴보세요. 버튼을 클릭한 후 #myBox의 최종 상태는 어떻게 됩니까?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
  #myBox {
    width: 50px;
    height: 50px;
    background-color: blue;
    position: relative;
    left: 0px;
    opacity: 1;
  }
</style>
</head>
<body>
  <div id="myBox"></div>
  <button id="btn">Click Me</button>
  <script>
    $(document).ready(function() {
      $("#btn").on("click", function() {
        $("#myBox")
          .animate({left: '100px'}, 500)
          .delay(500)
          .animate({opacity: 0.5}, 500)
          .hide(500);
      });
    });
  </script>
</body>
</html>

복습: 연결 및 대기열

잘하셨습니다! jQuery의 애니메이션 연결 및 대기열 메커니즘을 사용하여 동적이고 순차적인 시각 효과를 만드는 방법을 학습하셨습니다.

  • 연결: 여러 애니메이션 메서드를 서로 연결합니다.
  • 대기열: jQuery가 애니메이션을 순서대로 관리합니다.
  • .delay(): 애니메이션 사이에 일시 중지합니다.
  • .queue(): 사용자 지정 함수를 대기열에 삽입합니다.
  • .stop(): 대기열을 중단하거나 지웁니다.
  • .finish(): 대기열에 있는 모든 애니메이션을 즉시 완료합니다.

다음에는 더욱 정밀하게 제어할 수 있는 사용자 지정 이징과 애니메이션 콜백을 살펴보겠습니다!

자주 묻는 질문

“애니메이션 연결 및 대기열 관리” 강의는 무료인가요?

네 — “애니메이션 연결 및 대기열 관리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 jQuery Academy 강의 전체를 잠금 해제할 수 있습니다. jQuery Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“애니메이션 연결 및 대기열 관리”에서 뭘 배우나요?

여러 애니메이션 메서드를 연결하고 애니메이션 대기열을 관리해 동적 인터페이스를 위한 순차적이고 조화로운 시각 효과를 만드는 방법을 살펴봅니다. 브라우저에서 직접 실행하는 실습 코드로 jQuery Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

jQuery Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 jQuery Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 1번째 강의입니다.

“애니메이션 연결 및 대기열 관리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 jQuery Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 jQuery Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. 애니메이션 연결 및 대기열 관리
  2. 사용자 정의 이징 및 애니메이션 콜백
  3. 고급 토글 및 슬라이드 효과
← jQuery Academy(으)로 돌아가기