애니메이션 대기열 및 스타일 충돌을 피하면서 jQuery를 사용하여 클래스 변경 사항을 원활하게 애니메이션화하려면 어떻게 해야 합니까?

jQuery를 사용한 애니메이션 클래스 조작

문제:

jQuery에서 addClass() 및 RemoveClass()를 사용하는 방법 수업 변경 사항을 원활하게 애니메이션화할 수 있나요? animate()?

예 1: animate() 사용

$('#someDiv').mouseover(function() {
  $(this).stop().animate({ backgroundColor: 'blue' }, { duration: 500 });
}).mouseout(function() {
  $(this).stop().animate({ backgroundColor: 'red' }, { duration: 500 });
});

이 접근 방식은 부드러운 전환, 애니메이션 대기열 없음, 올바른 여유 등 원하는 기준을 모두 충족합니다. 그러나 스타일 변경은 스타일 시트와 분리하여 애니메이션 내에서 정의해야 합니다.

예 2: addClass() 및 RemoveClass() 사용

$('#someDiv').addClass('blue').mouseover(function() {
  // Remove inline styles before applying 'red' class with animation
  $(this).stop(true, false).removeAttr('style').addClass('red', { duration: 500 });
}).mouseout(function() {
  // Same for removing 'red' class
  $(this).stop(true, false).removeAttr('style').removeClass('red', { duration: 500 });
});

이 접근 방식 기준을 부분적으로 충족하여 원활한 전환을 보여주고 대기열을 방지합니다. 그러나 클래스 애니메이션 중 jQuery의 임시 스타일 추가로 인해 조기 마우스 움직임으로 인해 색상이 점프합니다.

해결책:

클래스에서 스타일을 통합하면서 원하는 동작을 달성하려면 , 클래스 변경 사항을 조작하려면 jQuery와 함께 CSS 전환을 사용하는 것이 좋습니다.

#someDiv {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

$('#someDiv').addClass('blue').mouseover(function() {
  $(this).addClass('red');
}).mouseout(function() {
  $(this).removeClass('red');
});

위 내용은 애니메이션 대기열 및 스타일 충돌을 피하면서 jQuery를 사용하여 클래스 변경 사항을 원활하게 애니메이션화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!