이 문서의 예에서는 jQuery 애니메이션 효과와 관련된 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
1. show() 표시 효과
구문: show(speed,callback) 숫자/문자열, 함수 speed는 애니메이션 실행 시간(밀리초)입니다. "느리게", "보통", "빠르게"일 수도 있습니다. 콜백은 선택사항이며 애니메이션이 완료되면 실행되는 함수입니다.
show(speed,[easing],callback) 숫자/문자열 완화는 기본적으로 스윙, 선택적 선형;
2. hide() 숨겨진 효과
구문: hide(speed,callback) 숫자/문자열,함수
숨기기(속도, 완화, 콜백) 숫자/문자열
toggle(속도,콜백) 숫자/문자열,문자열,함수
4. SlideDown()은 아래쪽으로 표시되고, Slow()는 가로와 세로로 동시에 확장되는 반면, SlideDown은 세로 방향으로만 아래쪽으로 확장됩니다.
구문: SlideDown(speed,callback) 숫자/문자열,함수
slideDown(speed,[easing],callback) 숫자/문자열,함수
slideUp(speed,[easing],callback) 숫자/문자열,문자열,함수
slideToggle(speed,[easing],callback) 숫자/문자열,문자열,함수
7. fadeIn()은 투명도를 표시로 변경합니다
구문: fadeIn(speed,callback) 숫자/문자열,함수
fadeIn(속도,[완화],콜백) 숫자/문자열,함수
fadeOut(speed,[easing],callcack) 숫자/문자열,문자열,함수
구문: fadeToggle(speed,callback) 숫자/문자열,함수
fadeToggle(speed,[easing],callback) 숫자/문자열,함수
구문: fadeTo(speed,callback) 숫자/문자열,함수
fadeTo([속도],불투명도,[완화],[fn]) 숫자/문자열,Float,String,Function
구문: animate(params,speed,easing,callback) 스타일 매개변수, 시간, 선택 사항, 함수
매개변수는 대괄호로 묶어야 하며 CSS 스타일 매개변수를 사용할 수 있습니다. Camel's Law를 사용해야 합니다. 예를 들어, 글꼴 크기는 글꼴 크기로 작성해야 합니다. 색상 그라데이션은 지원되지 않습니다.
배경 위치
테두리 너비
경계하단너비
국경왼쪽폭
국경오른쪽폭
국경 상단 너비
테두리 간격
여백
여백하단
여백왼쪽
마진오른쪽
마진상단
개요 너비
패딩
패딩하단
패딩왼쪽
패딩맞아
패딩탑
키
너비
최대 높이
최대폭
최소 높이
최대폭
글꼴
글꼴크기
하단
왼쪽
그렇죠
탑
글자간격
단어 간격
줄높이
텍스트 들여쓰기
12. stop() 실행 중인 애니메이션을 중지합니다
stop([clearQueue],[gotoEnd]); 두 매개변수 모두 부울 값입니다. 첫 번째는 애니메이션 실행을 중지할지 여부를 나타내고 두 번째는 중지되면 즉시 완료 상태로 변경되는지 여부를 나타냅니다. 절반만 실행된 상태를 유지하려면 아니요로 설정하세요.
$("#div1").hide(5000) //此动画正在执行 $("#div1").stop(); //上一行代码指定的动画停止在一半状态 $("#div1").stop(true,true); //停止当前动画,同时动画切换到完成执行状态。
13. 지연() 애니메이션 실행 지연 애니메이션이 중지()되면 지연()을 사용하여 실행을 지연할 수도 있습니다. 실행이 중단된 부분부터 계속됩니다. 물론 원래의 방법으로 계속 실행하는 것은 불가능하지만 지연 효과는 없습니다.
delay(duration,[queueName]) 애니메이션을 수행하기 위한 지연 값을 설정합니다. Integer,String
$(function(){ jQuery.fx.off = true; //属性在事件外面,对页面加载后执行的所有动画有效 $("#div1").click(function(){ //属性如果写在这里,仅仅对当前点击事件无效,不影响其他事件的动画 $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效,相当于hide(); }); })
$(function(){ jQuery.fx.interval = 1000; $("#div1").click(function(){ $("#div1").hide(3000); //jQuery.fx.interval设置为1000,也就是1秒钟,改变一次效果。 }); })이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.