jQuery를 효과 - 애니메이션
의 jQuery 애니메이션 () 메서드를 사용하면 사용자 지정 애니메이션을 만들 수 있습니다.
jQuery를 애니메이션 - 애니메이션 () 메소드
의 jQuery 애니메이션 () 메소드는 사용자 지정 애니메이션을 만드는 데 사용됩니다.
구문 :
필수 PARAMS 매개 변수는 CSS 속성 애니메이션의 형성을 정의합니다.
선택적 속도 파라미터는 효과의 지속 기간을 지정한다. 그것은 다음과 같은 값을 취할 수있다 : "느린", "빨리", 또는 밀리 초.
선택적 콜백 파라미터 종료 후에 실행되는 기능의 이름이다.
다음은 간단한 응용 프로그램의 애니메이션 () 메서드를 보여줍니다. 그것은 <DIV> 오른쪽에있는 요소는 250 픽셀을 이동합니다 :
 | 기본적으로 모든 HTML 요소는 정적 인 위치를 가지고 이동할 수 없습니다. 작동 위치를 들면, 상대적으로 설정된 고정 또는 절대 제 1 엘리먼트 CSS 위치 특성을 기억! |
|---|
의 jQuery 애니메이션 () - 여러 속성을 운영
애니메이션을 생성하는 과정은 여러 속성을 사용할 수 있습니다 :
예
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
»시도
| 모든 CSS 속성을 작동 할 수 있습니다 () 메소드 애니메이션을 적용 할 수 있습니다? 네, 거의! 그러나, 중요한 것은 기억 : 애니메이션 ()를 사용하는 경우, 카멜 표기법을 사용해야합니다 모든 속성의 이름을 쓰고, 예를 들어, 대신 사용해야합니다 paddingLeft 패딩 왼쪽, 대신 marginRight 마진 오른쪽을 사용하는 등 . 동시에, 컬러 애니메이션 코어 jQuery 라이브러리에 포함되지 않는다. 당신이 컬러 애니메이션을 생성해야하는 경우 필요 통해 jquery.com 다운로드 컬러 애니메이션 플러그인. |
|---|
의 jQuery 애니메이션 () - 상대 값의 사용
또한 상대 값 (값이 소자의 전류 값을 기준으로)를 정의 할 수있다. 로 값을 선행하는 데 필요한 + = 또는 - =
예
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
»시도
() JQuery와 애니메이션 - 사전 정의 된 값을 사용
당신은, "숨기기"또는 "토글" "쇼"에 애니메이션 속성 값을 넣을 수 있습니다 :
의 jQuery 애니메이션 () - 큐 기능을 사용하여
기본적으로 jQuery를 애니메이션에 대한 큐잉 기능을 제공합니다.
이것은 당신이 다른 애니메이션 () 호출 후 하나 이상 작성하는 경우, jQuery를이 메서드 호출이 "내부"큐를 만드는 것을 의미합니다. 그런 다음 하나 하나는이 전화를 애니메이션을 실행합니다.
예 1
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
»시도
<div> 요소의 다음의 예는 100 픽셀 오른쪽으로 이동하고 텍스트의 크기를 증가된다 :
예 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
»시도