예
그 높이를 변화시킴으로써, 요소를 "애니메이션"
$("button").click(function(){
$("#box").animate({height: "300px"});
});
»그것을 자신을 시도 정의 및 사용
animate() 메서드는 CSS 속성 세트의 사용자 지정 애니메이션을 수행한다.
이 방법은 CSS 스타일을 가진 한 상태에서 다른 상태로 요소를 변경합니다. CSS의 속성 값은 애니메이션 효과를 만들, 점진적으로 변경됩니다.
단지 숫자 값 (같은 애니메이션 할 수 있습니다 "margin:30px" ). 문자열 값은 (같은 애니메이션 할 수 없습니다 "background-color:red" 문자열을 제외하고) "show", "hide" 및 "toggle" . 이 값은 숨기고 애니메이션 요소를 표시 할 수 있습니다.
팁 : "+=" "-=" "+=" "-=" 에 대한 상대 애니메이션.
통사론
(selector).animate({styles},speed,easing,callback)| 매개 변수 | 기술 |
|---|---|
| styles | 필요합니다. 애니메이션 하나 이상의 CSS 속성 / 값을 지정합니다. 참고 : 다음과 함께 사용했을 때 속성 이름은 낙타 맡았다해야합니다 animate() 방법 : 당신은 대신 paddingLeft를 작성해야합니다 패딩 왼쪽, marginRight 대신 등 마진 오른쪽합니다. 애니메이션 할 수 속성 :
단지 숫자 값 (같은 애니메이션 할 수 있습니다 "margin:30px" ). 문자열 값은 (같은 애니메이션 할 수 없습니다 "background-color:red" 문자열을 제외하고) "show", "hide" 및 "toggle" . 이 값은 숨기고 애니메이션 요소를 표시 할 수 있습니다. 팁 : 색상 애니메이션은 핵심 jQuery 라이브러리에 포함되지 않습니다.당신은 색상을 애니메이션을 적용 할 경우, 당신은 다운로드해야 컬러 애니메이션 플러그인 에서 jQuery.com |
| speed | 선택 과목. 애니메이션의 속도를 지정합니다. 기본값은 400 밀리 초입니다 가능한 값 :
|
| easing | 선택 과목. 애니메이션의 다른 지점에서의 요소 속도를 지정한다. 디폴트 값은 "swing" . 가능한 값 :
|
| callback | 선택 과목. 애니메이션이 완료된 후 함수가 실행된다. 콜백에 대한 자세한 내용은, 우리의 참조하시기 바랍니다 jQuery를 콜백 장을 |
대체 구문
(selector).animate({styles},{options})| 매개 변수 | 기술 |
|---|---|
| styles | 필요합니다. 하나 이상의 CSS 속성을 지정 / 값이 애니메이션 (위의 가능한 값 참조) |
| options | 선택 과목. 애니메이션에 대한 추가 옵션을 지정합니다. 가능한 값 :
|
그것을 자신을 시도 - 예를
사용 animate() 콜백 함수
사용 방법 animate() 애니메이션을 반복하는 콜백 기능을.
다른 구문 예
여러 애니메이션 스타일과 옵션을 지정하는 대체 구문을 사용하여.
사용하여 animate() 진행률 표시 줄을 만드는 방법
사용하는 방법 animate() 진행률 표시 줄을 만드는 방법.
페이지 앵커에 부드러운 스크롤 추가
사용 방법 animate() 링크에 부드러운 스크롤을 추가 할 수 있습니다.