jquery CSS 애니메이션 중지

웹페이지 제작에서 애니메이션 효과는 매우 일반적인 요소이며, CSS 애니메이션은 가장 널리 사용되는 방법 중 하나입니다. 그러나 진행 중인 CSS 애니메이션을 중지해야 하는 경우도 있습니다. 이 경우 이를 달성하기 위해 jquery를 사용해야 합니다. 이 기사에서는 jquery를 사용하여 CSS 애니메이션을 중지하는 방법을 소개합니다.

1. CSS 애니메이션이란 무엇입니까?

CSS3의 애니메이션 효과는 @keyframes 규칙을 사용하여 정의됩니다. 요소에 키프레임, 애니메이션 시간 등의 속성을 추가하여 다양한 애니메이션 효과를 얻을 수 있습니다.

예를 들어 다음 CSS 코드를 정의하여 왼쪽에서 오른쪽으로 움직이는 애니메이션을 구현할 수 있습니다.

@keyframes move-right {
  0% { left: 0; }
  100% { left: 100px; }
}

#box {
  position: absolute;
  left: 0;
  animation: move-right 2s ease-out forwards;
}

위 코드에서는 "move-right"라는 애니메이션을 정의합니다. 키프레임은 요소의 왼쪽 위치 속성을 각각 설정합니다. 그런 다음 이 애니메이션을 ID가 "box"인 요소에 적용하고 애니메이션 시간을 2초로 설정하고 완화 효과를 "ease-out"으로 설정한 다음 마지막으로 요소에서 애니메이션의 최종 상태를 유지합니다.

2. CSS 애니메이션 중지

일반적으로 CSS 애니메이션은 우리가 정의한 애니메이션 시간과 규칙에 따라 끝까지 반복됩니다. 하지만 애니메이션이 실행되는 동안 중지해야 하는 경우도 있습니다. 이 경우 이를 달성하려면 jquery를 사용해야 합니다.

먼저 애니메이션을 멈출 수 있는 요소에 버튼이나 기타 트리거를 추가하고, 트리거에 이벤트 리스너를 추가해야 합니다. 예를 들어 아래 코드에서는 버튼이 포함된 div 요소를 만들고 버튼에 대한 "클릭" 이벤트 리스너를 추가합니다.

<div id="box" class="animated">
  <button id="stop-btn">停止动画</button>
</div>

다음으로 사용자가 버튼을 클릭할 때 실행되는 jquery 이벤트 리스너를 정의해야 합니다. 애니메이션을 중지합니다. 애니메이션 요소의 ID를 이벤트 리스너에 전달한 다음 jquery의 "stop()" 메서드를 사용하여 애니메이션을 중지합니다. 예를 들어 아래 코드에서는 "stop-btn"이라는 버튼을 만들고 여기에 클릭 이벤트 리스너를 추가합니다.

$(document).ready(function() {
  $('#stop-btn').click(function() {
    $('#box').stop();
  });
});

위 코드에서는 jquery의 "ready()" 메서드를 사용하여 페이지가 로드한 다음 버튼 요소에 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭하면 jquery는 "box"라는 요소에서 진행 중인 애니메이션을 중지합니다. 애니메이션을 재생하려면 jquery의 "animate()" 메서드를 사용하여 애니메이션을 다시 시작해야 한다는 점에 유의해야 합니다.

3. jquery를 사용하여 CSS 애니메이션을 중지할 때 주의할 사항

jquery를 사용하여 CSS 애니메이션을 중지할 때 다음 사항에 주의해야 합니다.

1 jquery를 사용하면 언제든지 CSS 애니메이션 재생을 중지할 수 있습니다. 애니메이션 재생 중이든 애니메이션이 끝난 후이든 상관없습니다.

2. "stop()" 메서드를 사용하여 지정된 요소의 모든 애니메이션을 중지하거나 "stop(true)" 메서드를 사용하여 현재 재생 중인 애니메이션을 중지하고 즉시 최종 상태로 이동할 수 있습니다. "stop(false) )" 메소드를 사용하면 현재 재생 중인 애니메이션을 중지하고 현재 상태로 둡니다.

3. CSS 애니메이션을 중지하면 정의된 모든 CSS 애니메이션 속성과 키프레임이 즉시 제거됩니다. 즉, 애니메이션을 재생하려면 CSS 속성과 키프레임을 다시 추가해야 합니다.

IV. 요약

jquery를 사용하여 CSS 애니메이션을 중지하는 것은 재생 중인 애니메이션을 쉽게 중지하고 필요할 때 다시 시작할 수 있는 매우 편리한 방법입니다. 그러나 실제 사용에서는 다양한 세부 사항에 주의해야 합니다. 예를 들어 애니메이션을 정의할 때 재생 및 중지의 세부 사항을 명확히 해야 하며, 애니메이션 재생의 다양한 상태와 속성도 알아야 합니다. 이 글은 주로 jquery를 사용하여 CSS 애니메이션 재생을 중지하는 방법을 소개합니다. 모든 분들께 도움이 되기를 바랍니다.

위 내용은 jquery CSS 애니메이션 중지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!