jQuery를 이용하여 애니메이션을 구현하는 방법에 대해 이야기해보겠습니다. (자세한 코드 설명)

jQuery를 사용하여 애니메이션을 구현하는 방법은 무엇입니까? 다음 기사에서는 사전 정의된 애니메이션이나 사용자 정의 애니메이션을 구현하는 몇 가지 jQuery 방법을 소개합니다. 이것이 도움이 되기를 바랍니다.

사전 정의된 애니메이션

표시 및 숨기기

show() 메서드와 hide() 메서드는 애니메이션에서 가장 기본적인 애니메이션 메서드입니다. jQuery를 . 구체적인 구문은 다음과 같습니다: show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。具体语法如下:

$element.show([speed],[easing],[fn]);
$element.hide([speed],[easing],[fn]);

• speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。
• easing : 用来指定切换效果，默认是 “swing”，可用参数 “linear ”。
• fn : 在动画完成时执行的函数，每个元素执行一次。

/* 
显示与隐藏
1.无动画版本
  * show()- 显示
  * hide() - 隐藏
2.有动画版本 - 同时改变宽度和高度
 * show (speed,callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
 * hide (speed, callback)
  * speed - 动画执行的时长,单位为毫秒
  * callback - 动画执行完毕后的回调函数
*/

$('#box').hide(2000,function(){
$('#box').show(2000);          
});

滑动式动画

slidelUp() 方法和 slideDown() 方法通过改变高度值实现动画效果。具体语法如下:

$element.slideUp([speed],[easing],[fn]);
$element.slideDown([speed],[easing],[fn]);

• speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。
• easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。
• fn : 在动画完成时执行的函数，每个元素执行一次。

/* 
滑动式动画 - slideup()和slideDown()
* 注意 - 没有无动画版本(底层代码预定义动画执行的时长)
* 效果 - 改变指定元素的高度
*/
$('#box').slideUp(3000);
$('#box').slideDown(3000);

淡入淡出效果

fadeln() 方法和 fadeOut() 方法通过改变透明度实现动画效果。具体语法如下:

$element.fadeln([speed],[easing],[fn]);
$element.fadeOut([speed],[easing],[fn]);

• speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。
• easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。
• fn : 在动画完成时执行的函数，每个元素执行一次。

// 改变元素的透明度
$('#box').fadeOut(3000);
$('#box').fadeIn(3000);

动画切换效果

jQuery 除了提供了三种预定义动画效果之外，还提供三组动画切换效果:

• toggle ([speed], [easing] [, fn] )方法 : 如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。
• slideToggle([speed], [easing] [, fn]) 方法 : 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
• fadeToggle([speed], [easing] [, fn]) 方法 : 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

$('#btn').click(function(){
// $('#box').toggle(3000);
// $('#box').slideToggle(3000);
$('#box').fadeToggle(3000)
})

具有局限性

自定义动画

animate()方法

jQuery 提供了 anirmate() 方法完成自定义动画效果，该方法具有两种用法:

$element.animate(properties,duration,easing,complete)

• properties : 一个CSS属性和值的对象,动画将根据这组对象移动。
• duration : 一个字符串或者数字决定动画将运行多久。
• easing : 一个字符串，表示过渡使用哪种缓动函数。
• cormplete : 在动画完成时执行的回调函数。

/* 
animate()方法–自定义动画方法
1.animate(properties,duration，callback)
 * properties - 表示cSS的样式属性
  * 设置动画执行结束的样式属性值
 * duration - 表示动画执行的时长，单位为亳秒
 * callback - 表示动画执行完毕后的回调函数
2.animate(properties,options)
 * properties - 表示cSS的样式属性
  * 设置动画执行结束的样式属性值
 * options - 表示设置动画的相关参数
  * speed - 表示动画执行的时长,单位为毫秒
  * comalete - 表示动画执行完毕后的回调函数
  * queue - 布尔值,设置是否添加到动画队列中
*/
/* $('#box').animate({
 width : 100,
 height : 100
},3000);
*/
$('#box').animate({
 width : 100,
 height : 100,
 left : 100
},{
 speed : 3000
});

通过 animate() 方法实现动画效果，但不支持以下 CSS 样式属性:

• backgroundColor
• borderBottonColor.
• borderLeftColor
• borderRightColor
• borderTopColor
• Color
• outlineColor

并发与排队效果

并发效果 : 指的就是多个动画效果同时执行。

$("#panel").click(function(){
 $(this).animate({
   left: "500px",
   height:"200px"
 }, 3000);
};

排队效果 : 指的就是多个动画按照先后顺序执行。

$("#panel").click(function(){
 $(this).animate({ left: "500px"},3000)
  .animate({ height: "200px" }, 3000);
});

queue : 用于控制当前的动画效果是并发还是排队效果:

/* 
queue - 用于控制当前的动画效果是并发还是排队效果
* 参数
 * false - 并发
 * true - 排队
*/
$('#box').animate({
 left : 300
},{
 duration : 3000
}).animate({
 top : 300
},{
 duration : 3000,
 queue : true
});

停止动画效果

jQuery 提供了 stop() 方法用于停止所有在指定元素上正在运行的动画，具体语法如下:

$element.animate([clearQueue][, gotoEnd]);

clearQueue : 如果设置成 true，则清空队列。可以立即结束动画。

gotoEnd : 让当前正在执行的动画立即完成，并且重设 show 和 hide 的原始样式，调用回调函数等

$('#stort').click(function(){
 $('#box').animate({
 left : 600
},3000).animate({
 top : 200
 },3000)
});
$('#stop').click(function(){
/* 
 * stop()方法没有接收任何参数时 - 立即停止执行动画
 * stop(queue)方法的第一个参数
  * false - 表示停止当前动画,但队列中的动画继续执行
  * true - 表示停止当前动画,并且清空动画队列
 * stop (queue,gotoEnd)方法的第二个参数
  * false - 不会做任何处理
  * true - 表示停止当前动画，并且将指定元素设置为动画执行完毕后的样式
*/
 $('#box').stop(true,true);
});

延迟执行动画

jQuery 提供了 delay()

$element.delay(duration, queueName]);

• speed: 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값.
• Easing: 전환 효과를 지정하는 데 사용되며 기본값은 "swing"이고 사용 가능한 매개변수는 "linear"입니다.
• fn: 애니메이션이 완료되면 각 요소에 대해 한 번씩 실행되는 함수입니다.

$('#box').animate({
 left : 600
},3000).delay(1000).animate({
 top : 200
},3000);

Sliding animation

slidelUp() 메서드와 slideDown() 메서드는 높이 값을 변경하여 애니메이션 효과를 얻습니다. 구체적인 구문은 다음과 같습니다: rrreee

• speed: 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값.
• Easing: 전환 효과를 지정하는 데 사용되며 기본값은 "swing"이고 사용 가능한 매개변수는 "linear"입니다.
• fn: 애니메이션이 완료되면 각 요소에 대해 한 번씩 실행되는 함수입니다.

rrreee🎜🎜Fade effect🎜🎜🎜🎜fadeln() 메서드와 fadeOut() 메서드는 투명도를 변경하여 애니메이션 효과를 얻습니다. 구체적인 구문은 다음과 같습니다: 🎜rrreee

• speed: 미리 결정된 세 가지 속도("느림", "보통" 또는 "빠름") 중 하나의 문자열 또는 애니메이션 지속 시간을 나타내는 밀리초 값.
• Easing: 전환 효과를 지정하는 데 사용되며 기본값은 "swing"이고 사용 가능한 매개변수는 "linear"입니다.
• fn: 애니메이션이 완료되면 각 요소에 대해 한 번씩 실행되는 함수입니다.

rrreee🎜🎜🎜애니메이션 전환 효과🎜🎜🎜🎜미리 정의된 세 가지 애니메이션 효과 외에도 jQuery는 세 가지 애니메이션 전환 효과 세트도 제공합니다.🎜

• 전환 ([속도], [완화] [, fn] ) 방법: 요소가 표시되면 숨김으로 전환하고, 요소가 숨겨져 있으면 표시로 전환합니다.
• slideToggle([speed], [easing] [, fn]) 메서드: 높이를 변경하고 선택적으로 전환이 완료된 후 일치하는 모든 요소의 표시 여부를 전환합니다. 콜백 함수.
• fadeToggle([speed], [easing] [, fn]) 메서드: 불투명도 변경을 통해 일치하는 모든 요소의 페이드 인 및 페이드 아웃 효과를 전환합니다. 애니메이션을 완료하고 선택적으로 콜백 함수를 트리거합니다.

rrreee🎜🎜에는 제한이 있습니다🎜🎜

맞춤 애니메이션🎜🎜🎜🎜animate() 메서드🎜🎜🎜🎜 jQuery는 anirmate The ()를 제공합니다. 메소드는 사용자 정의 애니메이션 효과를 완성합니다. 이 메소드에는 두 가지 용도가 있습니다: 🎜rrreee

• 속성: CSS 속성 및 값의 객체 애니메이션은 이 객체 세트에 따라 움직입니다.
• duration : 애니메이션이 실행되는 시간을 결정하는 문자열 또는 숫자입니다.
• easing : 전환에 사용할 여유 기능을 나타내는 문자열입니다.
• corplete: 애니메이션이 완료되면 실행되는 콜백 함수입니다.

rrreee🎜애니메이션 효과는 animate() 메서드를 통해 구현되지만 다음 CSS 스타일 속성은 지원되지 않습니다:🎜

BackgroundColor
• borderBottonColor.
• borderLeftColor
• borderRightColor code>
• borderTopColor
• 색상
• outlineColor

🎜🎜🎜동시성 및 대기열 효과🎜🎜🎜🎜동시 효과: 여러 애니메이션 효과를 동시에 실행하는 것을 말합니다. 🎜rrreee🎜큐 효과: 여러 애니메이션을 순차적으로 실행하는 것을 말합니다. 🎜rrreee🎜queue: 현재 애니메이션 효과가 동시인지 아니면 대기열에 있는지 제어하는 ​​데 사용됩니다. 🎜rrreee🎜🎜🎜Stop animation effect🎜🎜🎜🎜jQuery는 stop()을 제공합니다. 메소드는 지정된 요소에서 실행 중인 모든 애니메이션을 중지하는 데 사용됩니다. 구체적인 구문은 다음과 같습니다. 🎜rrreee🎜clearQueue: true로 설정하면 대기열이 지워집니다. 애니메이션을 즉시 종료할 수 있습니다. 🎜🎜gotoEnd: 현재 실행 중인 애니메이션을 즉시 완료하도록 하고, 표시 및 숨기기의 원래 스타일을 재설정하고, 콜백 함수를 호출하는 등의 작업을 수행합니다. 🎜rrreee🎜🎜🎜애니메이션 실행을 지연🎜🎜🎜🎜jQuery는 delay() 메소드는 대기열의 후속 항목 실행을 연기하기 위해 지연을 설정하는 데 사용됩니다. 구체적인 구문은 다음과 같습니다: 🎜rrreee🎜duration: 지연 시간(밀리초). 🎜🎜queueName: 대기열 명사, 기본값은 Ex, 애니메이션 대기열입니다. 🎜rrreee🎜 추천 관련 비디오 튜토리얼: 🎜jQuery 비디오 튜토리얼🎜🎜

위 내용은 jQuery를 이용하여 애니메이션을 구현하는 방법에 대해 이야기해보겠습니다. (자세한 코드 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!