jQuery 애니메이션 효과 관련 분석 예시_jquery

이 문서의 예에서는 jQuery 애니메이션 효과와 관련된 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

1. show() 표시 효과

구문: show(speed,callback) 숫자/문자열, 함수 speed는 애니메이션 실행 시간(밀리초)입니다. "느리게", "보통", "빠르게"일 수도 있습니다. 콜백은 선택사항이며 애니메이션이 완료되면 실행되는 함수입니다.

show(speed,[easing],callback) 숫자/문자열 완화는 기본적으로 스윙, 선택적 선형;

코드 복사 코드는 다음과 같습니다.

$("#div1").show(3000, function() { Alert("애니메이션 표시가 완료되었습니다!") });

2. hide() 숨겨진 효과

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

숨기기(속도, 완화, 콜백) 숫자/문자열

코드 복사 코드는 다음과 같습니다.

$("#div1").hide(3000, function() { Alert("애니메이션 숨기기 완료") });

3.toggle()은 현재 표시되어 있을 때는 숨겨지고 표시됩니다. 구문: 토글(속도,콜백) 숫자/문자열,함수

toggle(속도,콜백) 숫자/문자열,문자열,함수

코드 복사 코드는 다음과 같습니다.

$("#div1").toggle(3000, function() { Alert("애니메이션 효과 전환 완료") });

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

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

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

코드 복사 코드는 다음과 같습니다.

$("#div1").slideDown(3000, function() { Alert("성공적으로 표시하려면 아래쪽으로 확장하세요!");

5. SlideUp()은 위쪽으로 숨깁니다. hide()는 가로 및 세로 방향 모두에서 작동하는 반면, SlideUp()은 세로 방향으로만 위쪽으로 숨깁니다. 구문: SlideUp(speed,callback) 숫자/문자열,함수

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

코드 복사 코드는 다음과 같습니다.

$("#div1").slideUp(3000, function() { Alert("숨기기에 성공했습니다!") })

6. SlideToggle은 수직 방향으로 전환되며, SlideToggle은 수직 방향으로만 전환됩니다. 구문: SlideToggle(speed,callback) 숫자/문자열,함수

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

코드 복사 코드는 다음과 같습니다.

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

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

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

fadeIn(속도,[완화],콜백) 숫자/문자열,함수

코드 복사 코드는 다음과 같습니다.

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

8. fadeOut()은 투명도를 숨기도록 변경합니다 구문: fadeOut(speed,callback) 숫자/문자열,함수

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

코드 복사 코드는 다음과 같습니다.

$("#div1").fadeOut(3000, function() { Alert("페이드 아웃하고 성공적으로 숨겼습니다!");

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

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

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

코드 복사 코드는 다음과 같습니다.

$("#div1").fadeToggle(3000, function() { Alert("페이드 인 및 페이드 아웃에 성공했습니다!");

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

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

fadeTo([속도],불투명도,[완화],[fn]) 숫자/문자열,Float,String,Function

코드 복사 코드는 다음과 같습니다.

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

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

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

코드 복사 코드는 다음과 같습니다.

$("#div1").animate({ width:300px, 높이,300픽셀 },3000);

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

배경 위치
테두리 너비
경계하단너비
국경왼쪽폭
국경오른쪽폭
국경 상단 너비
테두리 간격
여백
여백하단
여백왼쪽
마진오른쪽
마진상단
개요 너비
패딩
패딩하단
패딩왼쪽
패딩맞아
패딩탑
키
너비
최대 높이
최대폭
최소 높이
최대폭
글꼴
글꼴크기
하단
왼쪽
그렇죠
탑
글자간격
단어 간격
줄높이
텍스트 들여쓰기

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

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

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

13. 지연() 애니메이션 실행 지연 애니메이션이 중지()되면 지연()을 사용하여 실행을 지연할 수도 있습니다. 실행이 중단된 부분부터 계속됩니다. 물론 원래의 방법으로 계속 실행하는 것은 불가능하지만 지연 효과는 없습니다.

delay(duration,[queueName]) 애니메이션을 수행하기 위한 지연 값을 설정합니다. Integer,String

코드 복사 코드는 다음과 같습니다.

$("#div1").delay(3000) .hide( 3000); //hide(3000)이 3000밀리초 후에 실행됨을 나타냅니다.

14. jQuery.fx.off //이 속성은 현재 페이지에서 애니메이션을 끌지 여부입니다. 애니메이션을 끄면 애니메이션 효과가 없으며 실행 시간이 설정된 모든 애니메이션이 완료됩니다. 곧. 이 속성이 나타나는 위치를 기록해 두십시오. 위치마다 영향을 미치는 영역이 다릅니다
.

$(function(){
  jQuery.fx.off = true; //属性在事件外面，对页面加载后执行的所有动画有效
  $("#div1").click(function(){ //属性如果写在这里，仅仅对当前点击事件无效，不影响其他事件的动画
   $("#div1").hide(3000); //注意由于jQuery.fx.off设置为了true,因此3000毫秒失效，相当于hide();
   });
})

15. jQuery.fx.interval //이 속성은 애니메이션의 프레임 속도를 밀리초 단위로 설정합니다. 시간이 짧을수록 부드러워집니다. , 속성이 나타나는 위치도 범위에 영향을 미칩니다

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

이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.