최신 웹 개발 튜토리얼
 

jQuery효과 - 애니메이션

❮ 이전 다음 장 ❯

JQuery와 animate() 메서드를 사용하면 사용자 지정 애니메이션을 만들 수 있습니다.



jQuery를

jQuery를 애니메이션 - animate() 메소드

JQuery와 animate() 메소드는 사용자 지정 애니메이션을 만드는 데 사용됩니다.

통사론:

$(selector).animate({params},speed,callback);

필요한 PARAMS 매개 변수는 CSS 속성 애니메이션 정의합니다.

선택적 속도 파라미터는 효과의 지속 기간을 지정한다. 그것은 다음과 같은 값을 가질 수있다 : "slow", "fast" 또는 밀리.

선택적 콜백 파라미터는 애니메이션이 완료된 후에 실행되는 함수이다.

다음은 간단한 사용을 보여줍니다 animate() 메소드를; 그것은 이동 <div> 는 250 픽셀의 좌측 속성에 도달 할 때까지 오른쪽으로 소자 :

예

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 
»그것을 자신을 시도

기본적으로 모든 HTML 요소들은 고정 위치를 가지며, 이동 될 수 없다.
위치를 조작하려면, 첫째로 요소의 CSS 위치 속성을 설정하는 것을 잊지 relative, fixed 또는 absolute !

의 jQuery animate() - 여러 속성을 조작

여러 속성을 동시에 애니메이션 될 수 있음에 주목 :

예

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 
»그것을 자신을 시도

그것은으로 모든 CSS 속성을 조작하는 것이 가능 animate() 메소드를?

네, 거의! 함께 사용하면 모든 속성 이름은 낙타 맡았다해야합니다 : 그러나 기억해야 할 한 가지 중요한 것은이 animate() 방법 : 당신이 작성해야합니다 paddingLeft 대신 padding-left, marginRight 대신 margin-right , 등등.

또한, 컬러 애니메이션은 핵심 jQuery 라이브러리에 포함되어 있지 않습니다.
당신은 색상을 애니메이션을 적용 할 경우, 당신은 다운로드해야 컬러 애니메이션 플러그인을 jQuery.com에서.

의 jQuery animate() - 상대 값을 사용하여

또한 상대 값을 정의 할 수있다 (값은 소자의 전류 값을 기준으로). 이것은 바꾸어 완료 += 또는 -= 값 앞에 :

예

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
}); 
»그것을 자신을 시도

의 jQuery animate() - 미리 정의 된 값을 사용하여

당신은 같은 속성의 애니메이션 값을 지정할 수 있습니다 "show", "hide" , 또는 "toggle" :

예

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
}); 
»그것을 자신을 시도

의 jQuery animate() - 큐 기능을 사용

기본적으로 jQuery를 애니메이션에 대한 큐 기능이 함께 제공됩니다.

이것은 여러 작성하는 경우 있음을 의미 animate() 서로 후, jQuery를이 메소드 호출과 함께 "내부"큐를 만들어 호출합니다. 그런 다음 애니메이션이 하나 하나 호출을 실행합니다.

당신은 서로 후에 다른 애니메이션을 수행 할 경우에 따라서, 우리는 큐 기능을 활용 :

예 1

$("button").click(function(){
    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> 요소를 이동하고 텍스트의 글꼴 크기를 증가 :

예 2

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
}); 
»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4»

jQuery를 효과 참조

모든 jQuery를 효과의 전체 개요는, 우리로 이동하시기 바랍니다 jQuery를 효과 참조 .


❮ 이전 다음 장 ❯