Jquery의 애니메이션 메소드-프런트엔드 Q&A-php.cn

Jquery의 애니메이션 메소드

PHPz

풀어 주다： 2023-05-28 11:32:37

원래의

1186명이 탐색했습니다.

jQuery는 개발자에게 DOM 요소를 조작하고 애니메이션을 수행할 수 있는 다양한 쉬운 방법을 제공하는 인기 있는 JavaScript 라이브러리입니다. 그 중 animate() 메소드는 애니메이션 효과를 얻기 위해 특정 시간 내에 요소의 CSS 속성 값을 점진적으로 변경하는 데 사용되는 매우 일반적으로 사용되는 메소드입니다. 이 기사에서는 구문, 매개변수 및 사용법을 포함하여 animate() 메서드를 심층적으로 살펴보겠습니다.

Syntax

animate() 메소드의 기본 구문은 다음과 같습니다.

$(selector).animate({properties}, speed, easing, callback)

로그인 후 복사

각 매개변수에 대한 설명은 다음과 같습니다.

selector: 필수, 애니메이션화할 하나 이상의 요소 .

selector

properties: 必需，规定一个或多个CSS属性及其值的对象。
speed: 可选，规定动画的执行速度，可以是 "slow"、"fast" 或毫秒数值。
easing: 可选，规定动画的缓动函数，可以是 "swing" 或 "linear" 或自定义函数的名称。
callback: 可选，当动画完成时要执行的函数。

除了上面的基本语法以外，animate()方法还可以接受许多其他参数和选项。

参数

下面是animate()方法中可以使用的一些常见参数：

step: 用于在动画过程中执行其他操作的函数，每一帧都会调用一次。这个函数有两个参数，第一个参数表示当前帧的进度，第二个参数表示当前元素的值。
queue: 一个布尔值，指示动画是否应该在先前的动画完成之后才开始。默认为 true。
start: 一个函数，用于在动画开始之前执行一些操作。
progress: 在动画过程中周期性调用的函数，每一帧都会调用一次。这个函数有三个参数，第一个参数表示当前帧的进度，第二个参数表示当前元素的值，第三个参数表示当前的时间。
done: 一个函数，在动画完成后执行。
fail: 一个函数，在动画失败时执行。
always: 一个函数，在动画完成或失败时执行。

除了这些参数以外，animate()方法还可以接受一些其他选项，例如：

duration: 指定动画的持续时间，可以是毫秒数值或 "fast"、"slow"。
easing: 指定动画缓动函数的名称或自定义函数。
complete: 指定动画完成时要调用的回调函数。
queue: 指定动画是否可以加入队列中。
specialEasing: 为某个特定的CSS属性指定缓动函数。

用法

下面是animate()方法的一些实际用例：

改变元素的宽度和高度

$("div").animate({
  width: "200px",
  height: "200px"
}, 1000);

로그인 후 복사

这个代码片段将会选择所有的 <div> 元素，然后用 1000 毫秒的时间把它们的宽度和高度都变为 200 像素。

改变元素的透明度和位置

$("#element").animate({
  opacity: 0.5,
  left: "+=50",
  top: "+=50"
}, 1000);

로그인 후 복사

这个代码片段将会选择一个id为 "element" 的元素，然后用 1000 毫秒的时间把它的透明度变为 0.5，左移50像素，上移50像素。

链式动画

$(".first").animate({left: "100px"}, 1000)
           .animate({top: "50px"}, 1000)
           .animate({height: "200px"}, 1000);

로그인 후 복사

这个代码片段将会选择class为 "first" 的元素，然后将它们先向左移动 100 像素，再向上移动 50 像素，最后将其高度变为 200 像素。此外，这些动画都是在前一个动画完成之后再执行的。

使用回调函数

$("button").click(function(){
  $("div").animate({
    width: "200px",
    height: "200px"
  }, 1000, function(){
    alert("动画完成！");
  });
});

로그인 후 복사

这个代码片段当用户单击按钮时，将会选择所有的 <div>properties: 필수, 하나 이상의 CSS 속성과 해당 값을 지정하는 개체입니다.

speed: 선택 사항이며 애니메이션의 실행 속도를 "느리게", "빠르게" 또는 밀리초 값으로 지정합니다.

easing: 선택 사항이며 애니메이션의 여유 기능을 지정합니다("스윙", "선형" 또는 사용자 정의 함수 이름일 수 있음).

콜백: 선택 사항, 애니메이션이 완료되면 실행되는 함수입니다.

위의 기본 구문 외에도 animate() 메서드는 다른 많은 매개변수와 옵션도 허용할 수 있습니다.

🎜Parameters🎜🎜다음은 animate() 메서드에서 사용할 수 있는 몇 가지 일반적인 매개 변수입니다. 🎜🎜🎜step: 애니메이션 프로세스 중에 다른 작업을 수행하는 데 사용되는 함수로, 한 번 호출됩니다. 모든 프레임. 이 함수에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 현재 프레임의 진행률을 나타내고 두 번째 매개변수는 현재 요소의 값을 나타냅니다. 🎜queue: 이전 애니메이션이 완료된 후 애니메이션을 시작해야 하는지 여부를 나타내는 부울 값입니다. 기본값은 true입니다. 🎜start: 애니메이션이 시작되기 전에 일부 작업을 수행하는 데 사용되는 함수입니다. 🎜progress: 애니메이션 프로세스 중에 프레임마다 한 번씩 주기적으로 호출되는 함수입니다. 이 함수에는 세 개의 매개변수가 있습니다. 첫 번째 매개변수는 현재 프레임의 진행률을 나타내고, 두 번째 매개변수는 현재 요소의 값을 나타내며, 세 번째 매개변수는 현재 시간을 나타냅니다. 🎜done: 애니메이션이 완료된 후 실행되는 함수입니다. 🎜fail: 애니메이션이 실패할 때 실행되는 함수입니다. 🎜always: 애니메이션이 완료되거나 실패할 때 실행되는 함수입니다. 🎜이러한 매개변수 외에도 animate() 메서드는 다음과 같은 다른 옵션도 허용할 수 있습니다. 🎜🎜🎜duration: 애니메이션의 지속 시간을 지정합니다. 밀리초 값이거나 "빠름", "느림"일 수 있습니다. 🎜easing: 애니메이션 여유 함수 또는 사용자 정의 함수의 이름을 지정합니다. 🎜complete: 애니메이션이 완료되면 호출될 콜백 함수를 지정합니다. 🎜queue: 애니메이션을 대기열에 추가할 수 있는지 여부를 지정합니다. 🎜specialEasing: 특정 CSS 속성에 대한 여유 기능을 지정합니다. 🎜Usage🎜🎜다음은 animate() 메소드의 실제 사용 사례입니다: 🎜

🎜요소의 너비와 높이 변경 rrreee🎜이 코드 스니펫은 모든 <div> 요소를 선택한 다음 1000밀리초 내에 너비와 높이가 200픽셀로 변경됩니다. 🎜

🎜요소의 투명도 및 위치 변경rrreee🎜이 코드 조각은 ID가 "element"인 요소를 선택한 다음 1000밀리초를 사용하여 변경 사항을 변경합니다. 불투명도를 0.5로 설정하고 왼쪽으로 50픽셀, 위쪽으로 50픽셀 이동합니다. 🎜

🎜체인 애니메이션rrreee🎜이 코드 조각은 클래스가 "first"인 요소를 선택한 다음 왼쪽으로 100픽셀, 위쪽으로 50픽셀 이동하고 마지막으로 변경됩니다. 높이는 200픽셀입니다. 또한 이러한 애니메이션은 이전 애니메이션이 완료된 후에 실행됩니다. 🎜

🎜콜백 기능 사용rrreee🎜이 코드 조각은 사용자가 버튼을 클릭할 때 모든 <div> 요소를 선택한 다음 너비와 높이를 200픽셀로 변경하는 데 1000밀리초가 걸립니다. 애니메이션이 완료되면 프롬프트 상자가 나타납니다. 🎜🎜요약🎜🎜이 기사에서는 jQuery의 animate() 메서드에 대해 배웠습니다. 이는 애니메이션 효과를 얻기 위해 특정 기간 내에 요소의 CSS 속성 값을 점진적으로 변경하는 데 사용되는 매우 일반적인 방법입니다. 우리는 구문, 매개변수 및 사용법에 대해 배웠고 몇 가지 실제 예를 살펴보았습니다. animate() 메소드에 능숙하면 웹사이트에 생생하고 매력적인 애니메이션 효과를 추가할 수 있습니다. 🎜

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