jQuery의 애니메이션-JS 튜토리얼-php.cn

jQuery의 애니메이션

炎欲天舞

풀어 주다： 2017-08-04 15:26:28

원래의

1124명이 탐색했습니다.

1.show() 메소드 및 hide() 메소드

는 요소의 표시 상태를 제어합니다. 즉, 이 세 가지 속성의 값이 100이 될 때까지 콘텐츠의 높이, 너비 및 불투명도를 변경하면서 표시 및 숨기기를 제어합니다. % 또는 0(표시: 없음). CSS 표시와 동일: block/inline/none;

참고: 애니메이션 효과를 위해 jQuery를 사용하려면 표준 모드가 필요합니다. 그렇지 않으면 애니메이션 지터가 발생할 수 있습니다. 표준 모드에서는 파일 헤더에 다음 DTD 정의가 포함되어 있어야 합니다.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://wslideww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

로그인 후 복사

매개변수: 고속--200ms, 일반--400ms, 느림--600ms, 지정된 숫자(ms), 매개변수가 숫자가 아닌 경우 인용문을 추가하세요. 매개변수가 숫자인 경우에는 추가하지 마세요.

(1) fadeIn() 메서드 및 fadeOut() 메서드

요소의 불투명도만 변경 - 요소가 완전히 사라질 때까지 투명도를 높이고 투명도를 줄입니다(표시: 없음)

(2) SlideUp() 메서드 및 SlideDown () 메소드

는 요소의 높이만 변경합니다 - 축소 및 확장

2.animate() 메소드 - 사용자 정의 애니메이션

left 속성: 이 속성은 위치 지정 요소 left를 정의합니다. 여백 가장자리와 포함 블록의 왼쪽 가장자리 사이의 오프셋입니다.

참고: "position" 속성의 값이 "static"인 경우 "left" 속성을 설정해도 아무런 효과가 없습니다.

형식: animate(params,speed,callback)

(1) 첫 번째 매개변수 params: 스타일 속성과 값을 포함하는 매핑, 예: {property: "value1", property: "value1". . . . }

(2) 두 번째 매개변수 speed : 속도 매개변수

(3) 세 번째 매개변수 callback : 콜백 함수, 애니메이션이 완료되었을 때 수행하는 동작

추가: ①속성의 값을 합산하고 뺄 수 있으며, 애니메이션화할 수 있음 ( {왼쪽: "+= 500px"})

② 동시에 여러 애니메이션을 수행하기 위해 서로 다른 속성을 설정하거나 순서대로 코드를 분해합니다. ③Nimate() 메서드 연결 쓰기 방식으로 여러 작업을 구현합니다

3. function

애니메이션 대기열: 애니메이션 효과는 순서대로 실행됩니다

참고: 애니메이션 메서드만 애니메이션 대기열에 추가할 수 있습니다. 애니메이션이 아닌 메서드는 애니메이션 대기열에 추가되지 않지만 즉시 실행됩니다. 애니메이션이 아닌 메서드는 콜백 함수에 애니메이션이 적용되지 않은 메서드를 작성하여 대기열에 추가됩니다.

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