jQuery 간단한 애니메이션 효과

1. show()는 애니메이션을 표시합니다.

구문: show(speed,callback) 숫자/문자열, 함수 속도는 애니메이션 실행 시간(밀리초)입니다. 느린", "일반", "빠른" 콜백도 가능하며 선택사항이며 애니메이션이 완료되면 실행되는 함수입니다.

show(speed,[easing],callback) 숫자/문자열 기본 easing 스윙(애니메이션이 완화되고 애니메이션이 시작될 때 점차 빨라짐), 선택적 선형(안정적인 애니메이션, 모든 프레임이 동일한 속도) ~                                       선형(안정적인 애니메이션, 각 프레임은 동일한 속도) isdisplay!"); }); hide(speed,easing,callback) 숫자/문자열 매개변수는 show의 매개변수 유형 및 정의와 동일합니다. show

　　 $("#p1")을 참조할 수 있습니다. hide(3000, function(){ 경고("애니메이션 숨기기 완료") });

3.toggle()은 현재 표시되면 자동으로 전환되어 숨겨집니다. 현재 숨겨져 있으면 표시됩니다.

구문: 전환(속도, 콜백) 숫자/문자열, 함수

효과 전환 완료") });

　　　

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

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

3000, function(){ Alert("아래쪽 디스플레이 확장 성공!"); });

5. 방향 및 SlideUp()은 수직 위쪽으로 숨깁니다.

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

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

　　 $("#p1").slideUp(3000,function(){ Alert("숨기기 성공!"); })

6. 슬라이드토글은 수직으로 전환되며, 수평 및 수평 모두 전환됩니다. SlideToggle은 수직 방향으로만 작동하는 반면 수직 방향은 수직 방향입니다.

구문: SlideToggle(speed,callback) 숫자/문자열,Function

.slideToggle(3000, function(){ Alert("수평 전환 성공"); });　　

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

문법 ：fadeIn(speed,callback)　Number/String,Function

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

　　 $("#p1").FadeIn(3000,function(){ Alert("페이드 인에 성공했습니다!"); });

8.fadeOut() 투명도를 hide

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

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

　　 $("#p1").fadeOut(3000,function(){ Alert("페이드 아웃하고 숨기기에 성공했습니다!"); });

9. fadeToggle()은 투명도를 변경하여 표시 상태와 숨겨진 상태 사이를 전환합니다

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

fadeToggle(speed,[easing ],callback) 숫자 /String,Function

　　 $("#p1").fadeToggle(3000,function(){ Alert("페이드 전환 성공!"); });

10, fadeTo () 지정된 시간까지 투명도를 지정된 투명도로 변경합니다

구문: fadeTo(speed,callback) 숫자/문자열, Function

　fadeTo([speed],opacity,[easing] ,[fn] )　숫자/문자열, 부동, 문자열, 함수, 불투명도는 투명도 값이 0-1

　　 $("#p1").fadeTo(3000,0.22,function(){ 경고( "투명도가 성공적으로 변경되었습니다!"); });

11. 일반적으로 애니메이션에는 디지털 변경 사항을 사용할 수 있습니다.

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

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

　　 여기서 매개변수는 대괄호로 묶어야 하며 CSS 스타일 매개변수를 사용할 수 있습니다. Camel's Law를 사용해야 합니다. 예를 들어, 글꼴 크기는 글꼴 크기로 작성해야 합니다. 색상 그라데이션은 지원되지 않습니다.

ㅋㅋㅋ

borderSpacingmargin
marginBottom
marginLeft
marginRight
marginTop
outline
Width
padding
paddingBottom
paddingLeft
paddingRight
padding 상단
height
widthmaxHeight
maxWidth
minHeight
maxWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent


12.stop() 진행 중인 애니메이션을 중지합니다.

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

　 $("#p1").hide(5000)　 //이 애니메이션이 실행되고 있습니다

　 $("#p1").stop(); //이전 코드 줄에 지정된 애니메이션 절반 상태에서 중지

　$("#p1").stop(true,true); //현재 애니메이션을 중지하고 실행 완료된 상태로 전환합니다.

13. 지연된 애니메이션 실행 애니메이션이 중지()되면 지연()을 사용하여 실행을 지연시킬 수도 있습니다. 실행은 중단된 부분부터 계속됩니다. 물론 원래의 방법으로 계속 실행하는 것은 불가능하지만 지연 효과는 없습니다. // hide(3000)가 3000밀리초 후에 실행됨을 나타냅니다.

14, jQuery.fx.off //이 속성은 현재 페이지에서 애니메이션을 끌지 여부만 나타냅니다. 애니메이션을 끈 후에는 애니메이션 효과가 없으며 실행 시간이 설정된 모든 애니메이션이 비활성화됩니다. 즉시 완료되었습니다. 이 속성이 나타나는 위치를 기록해 두십시오. 위치에 따라 효과가 다릅니다.

　$(function(){

　　jQuery.fx.off = true; //이 속성은 이벤트 외부에 있으며 페이지가 로드된 후 실행되는 모든 애니메이션에 유효합니다

　　$( "#p1" ).click(function(){ //여기에 속성을 쓰면 현재 클릭 이벤트에만 유효하지 않으며 다른 이벤트의 애니메이션에는 영향을 주지 않습니다

　　　$("#p1" ).hide(3000); //jQuery.fx.off가 true로 설정되어 있으므로 3000밀리초 후에 만료됩니다. 이는 hide()와 동일합니다. //이 속성은 애니메이션의 프레임 속도를 설정합니다. 밀리초 단위로 시간이 짧을수록 부드러워집니다. , 속성이 나타나는 위치도 범위에 영향을 미칩니다

　 $(function(){

　 jQuery.fx.interval = 1000;

　 $("#p1").click(function () {

　　　$("#p1").hide(3000); //jQuery.fx.interval은 1000으로 설정되어 1초이고 효과가 한 번 변경됩니다. 　　 });

})

위 내용은 jq의 몇 가지 기본 애니메이션에 대한 간단한 이해입니다. 동시에 jq를 처음 접한 동포들에게 도움이 되기를 바랍니다. 혹시 추가해야 할 사항이 있으면 차차 추가하도록 하겠습니다. 동시에 제안사항이 있으시면 적극적으로 올려주시기 바랍니다. 앞으로.

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