jQuery 애니메이션 효과 컬렉션

다음은 애니메이션 효과의 여러 가지 방법을 소개합니다.

1. show() 표시 효과

구문: show(speed,callback)　Number/String, Function : speed는 애니메이션 실행 시간(밀리초)입니다. "slow", "normal", "fast"일 수도 있습니다. 콜백은 선택 사항이며 애니메이션이 완료될 때 실행되는 함수입니다.

show(speed,[easing],callback) 숫자/문자열 기본 easing입니다. 스윙, 선택적 선형

$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　

콜백) 숫자/문자열, 함수

hide(speed,easing,callback) 숫자/ 문자열

3. 토글() 숨기기 및 표시가 자동으로 전환됩니다. 현재 표시되어 있으면 숨겨집니다. 표시됩니다

$("#div1").hide(3000,function(){ alert("动画隐藏完成") });

구문: 토글(speed,callback)　Number/String,Function

　toggle(speed,callback)　Number /String,String,Function　

4. SlideDown()은 아래쪽으로 표시되고, Slow()는 가로와 세로로 동시에 확장되며, SlideDown은 세로 방향으로만

$("#div1").toggle(3000,function(){ alert("动画效果切换完成") });

확장됩니다. (속도,콜백) 숫자/문자열,함수

SlideDown(속도,[easing],콜백) 숫자/문자열,함수

5. SlideUp()은 위쪽으로 숨기고, hide()는 가로 및 세로 방향 모두에 있는 반면, SlideUp()은 세로 방향으로만 위쪽으로 숨깁니다.

$("#div1").slideDown(3000,function(){ alert("向下展开显示成功!"); });

구문: SlideUp(speed,callback) 숫자/문자열, 함수

SlideUp(speed,[easing],callback) 숫자/문자열,문자열,함수

6. 슬라이드토글 스위치 Toggle은 가로 및 세로 방향 모두에 적용되는 반면, SlideToggle은 세로 방향에만 적용됩니다.

$("#div1").slideUp(3000,function(){ alert("向上收起隐藏成功!"); })

구문: SlideToggle( speed,callback) Number/String,Function

SlideToggle(speed ,[easing],callback) 숫자/문자열,문자열, 함수

7. fadeIn()은 투명도를 표시하도록 변경합니다

$("#div1").slideToggle(3000,function(){ alert("水平方向上切换成功"); });

구문: fadeIn(speed,callback)　Number/String,Function

　fadeIn(speed,[easing],callback)　Number/ String, Function　　

8. fadeOut()은 투명도를 숨기도록 변경합니다.

$("#div1").FadeIn(3000,function(){ alert("淡入显示成功!"); });

구문: fadeOut(speed, callback) Number/ String,Function

fadeOut(speed,[easing],callcack ) 숫자/문자열,문자열,함수

9. fadeToggle () 투명도를 변경하여 표시 및 숨김 상태 전환

$("#div1").fadeOut(3000,function(){ alert("淡出隐藏成功!"); });

구문: fadeToggle(speed,callback)　숫자/문자열,함수

　 fadeToggle(속도,[easing],콜백)　숫자/문자열,함수

10. fadeTo()는 지정된 시간에 투명도를 지정된 투명도로 변경합니다.

$("#div1").fadeToggle(3000,function(){ alert("淡入淡出切换成功!"); });

구문: fadeTo(speed,callback )　　Number/String,Function

fadeTo([speed ],opacity,[easing],[fn])　Number/String,Float,String,Function

11. animate() 사용자 정의 애니메이션. 일반적으로 디지털 변화는 애니메이션에 사용될 수 있습니다.

$("#div1").fadeTo(3000,0.22,function(){ alert("透明度改变成功!"); });

구문: animate(params, speed, easing, callback); 스타일 매개변수, 시간, 선택 사항, 함수

여기서 Params 대괄호로 묶어야 하며 CSS 스타일 매개변수를 사용할 수 있습니다. 카멜 규칙에 주의하세요. 예를 들어 글꼴 크기는 글꼴 크기로 작성해야 합니다. 색상 그라데이션은 지원되지 않습니다.

$("#div1").animate({ width:300px,height,300px },3000);

backgroundPosition

borderWidth

borderBottomWidth

borderLeftWidth

borderRightWidth

borderTopWidth

borderSpacing

margin
marginBottom
marginLeft
여백오른쪽
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
maxWidth
글꼴
글꼴 크기
하단
왼쪽
오른쪽
상단
letterSpacing
wordSpacing
lineHeight
textIndent

stop() 실행 중인 애니메이션 중지

stop([clearQueue],[gotoEnd]); 두 매개변수 모두 부울 값입니다. 첫 번째는 애니메이션 실행을 중지할지 여부를 나타내고 두 번째는 변경 여부를 나타냅니다. 애니메이션이 중지되면 즉시 실행 완료 상태입니다. No로 설정하면 절반 실행 상태로 유지됩니다.

13. 애니메이션 실행을 지연시키기 위한 Delay() 애니메이션이 stop()인 경우, Delay()를 사용하여 애니메이션 실행을 지연시킬 수도 있습니다. 실행. 실행이 중단된 부분부터 계속됩니다. 물론 원래의 방법으로 계속 실행하는 것은 불가능하지만 지연 효과는 없습니다.

$("#div1").hide(5000)　　//此动画正在执行
 
　　$("#div1").stop();　　　　//上一行代码指定的动画停止在一半状态
 
　　$("#div1").stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

14. jQuery.fx.off//이 속성은 현재 페이지에서 애니메이션을 끈 후 끌 것인지 여부입니다. , 애니메이션 효과가 없습니다. 설정된 실행 시간이 있는 애니메이션은 즉시 완료됩니다. 이 속성이 나타나는 위치를 기록해 두십시오. 위치에 따라 효과가 다릅니다. ​

delay(duration,[queueName])　　设置一个延迟值来执行动画　　Integer,String
 
　　$("#div1").delay(3000).hide(3000);　　//表示在3000毫秒后执行hide(3000);

15、jQuery.fx.interval　　//该属性设置动画的帧速，单位是毫秒，如果设置的时间越小，就越平滑。，属性出现的位置同样有影响范围　

$(function(){
 
　　jQuery.fx.interval = 1000;
 
　　$("#div1").click(function(){　　
 
　　　　$("#div1").hide(3000);　　　//jQuery.fx.interval设置为1000，也就是1秒钟，改变一次效果。　
 
　　 });
 
 })