집 >웹 프론트엔드 >JS 튜토리얼 >jQuery에 내장된 여러 애니메이션 스타일

jQuery에 내장된 여러 애니메이션 스타일

小云云원래의: 2018-01-06 09:08:331966검색

JavaScript를 사용하여 애니메이션을 구현하는 원리는 매우 간단합니다. 매번 고정된 시간 간격(예: 0.1초)으로 DOM 요소의 CSS 스타일을 조금씩 수정하면 됩니다(예: 높이와 너비 증가). 10% 정도) 애니메이션처럼 보입니다.

하지만 JavaScript로 애니메이션 효과를 수동으로 구현하려면 매우 복잡한 코드를 작성해야 합니다. 쉽게 재사용할 수 있도록 애니메이션 효과를 함수로 캡슐화하려면 고려해야 할 사항이 더 있습니다. 이 기사에서는 주로 jQuery에 내장된 여러 애니메이션 스타일을 공유합니다.

jQuery를 사용하여 애니메이션을 구현하면 코드가 이보다 더 간단할 수 없습니다. 코드 한 줄만 있으면 됩니다!

먼저 jQuery에 내장된 몇 가지 애니메이션 스타일을 살펴보겠습니다.

show / hide

매개변수 없이 show() 및 hide()를 직접 호출하면 DOM 요소가 표시되거나 숨겨집니다. 그러나 시간 매개변수가 전달되는 한 애니메이션이 됩니다.

var p = $('#test-show-hide');
p.hide(3000); // 在3秒钟内逐渐消失

시간은 밀리초 단위이지만 'slow' 및 'fast'와 같은 문자열일 수도 있습니다.

var p = $('#test-show-hide');
p.show('slow'); // 在0.6秒钟内逐渐显示

toggle() 메서드는 다음과 같습니다. 현재 상태에 따라 show()할지, hide()할지 결정합니다.

slideUp / SlideDown

show() 및 hide()는 왼쪽 상단에서 점차 확대되거나 축소되고, SlideUp() 및 SlideDown()은 수직 방향으로 점차 확대되거나 축소되는 것을 볼 수 있습니다.

slideUp()은 표시된 DOM 요소를 닫습니다. 효과는 커튼을 닫는 것과 같습니다. SlideDown()은 그 반대이며, SlideToggle()은 요소가 표시되는지 여부에 따라 다음 작업을 결정합니다.

var p = $('#test-slide');
p.slideUp(3000); // 在3秒钟内逐渐向上消失

fadeIn / fadeOut

fadeIn() 및 fadeOut()의 애니메이션 효과는 페이드 인 및 아웃이며, 이는 DOM 요소의 불투명도 속성을 지속적으로 설정하여 달성되는 반면, fadeToggle()은 요소가 표시되는지 여부에 따라 다음 작업을 결정합니다.

var p = $('#test-fade');
p.fadeOut('slow'); // 在0.6秒内淡出

맞춤 애니메이션

위의 애니메이션 효과가 요구 사항을 충족할 수 없는 경우 모든 애니메이션 효과를 얻을 수 있는 최후의 수단인 animate()를 사용하세요. 전달해야 하는 매개 변수는 DOM 요소의 최종 CSS 상태와 시간입니다. . jQuery는 설정된 값에 도달할 때까지 CSS를 지속적으로 조정합니다.

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000); // 在3秒钟内CSS过渡到设定值

animate()는 애니메이션이 끝나면 호출되는 함수를 전달할 수도 있습니다.

var p = $('#test-animate');
p.animate({
  opacity: 0.25,
  width: '256px',
  height: '256px'
}, 3000, function () {
  console.log('动画已结束');
  // 恢复至初始状态:
  $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});

실제로 이 콜백 함수는 매개변수는 적용 가능한 기본 애니메이션에도 사용됩니다.

animate()를 사용하면 다양한 사용자 정의 애니메이션 효과를 얻을 수 있습니다.

animate()

Serial animation

jQuery의 애니메이션 효과는 순차적으로 실행될 수도 있고 지연() 메서드 Pause를 통해서도 얻을 수 있습니다. 방법을 사용하면 더 복잡한 애니메이션 효과를 얻을 수 있으며 코드는 매우 간단합니다.

var p = $('#test-animates');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
p.slideDown(2000)
  .delay(1000)
  .animate({
    width: '256px',
    height: '256px'
  }, 2000)
  .delay(1000)
  .animate({
    width: '128px',
    height: '128px'
  }, 2000);
}
</script>

애니메이션이 일정 기간 동안 실행되어야 하기 때문에 jQuery는 후속 작업을 수행하기 위해 계속해서 새로운 Promise 객체를 반환해야 합니다. 단순히 애니메이션을 함수로 캡슐화하는 것만으로는 충분하지 않습니다.

일부 애니메이션이 효과가 없는 이유

slideUp()과 같은 일부 애니메이션은 전혀 효과가 없는 경우가 있습니다. 높이가 100px에서 0으로 점차 변하는 등 CSS의 값을 점진적으로 변화시키는 것이 jQuery 애니메이션의 원리이기 때문입니다. 그러나 블록이 아닌 많은 DOM 요소의 경우 높이를 설정해도 전혀 효과가 없으므로 애니메이션에도 효과가 없습니다.

또한 jQuery는 배경색의 애니메이션 효과를 구현하지 않으며 animate()로 배경색을 설정해도 효과가 없습니다. 이 경우 CSS3 전환을 사용하여 애니메이션 효과를 얻을 수 있습니다.

jQuery에 내장된 여러 애니메이션 스타일

관련 기사