jQuery 효과 - 애니메이션
jQuery를 사용하여 사용자 정의 애니메이션을 만들 수 있습니다.
jQuery 애니메이션 - animate() 메서드
jQuery animate()메서드는 사용자 지정 애니메이션을 만드는 데 사용됩니다.
통사론:
$(selector).animate({params},speed,callback);
필수 params 매개변수는 애니메이션할 CSS 속성을 정의합니다.
선택적 속도 매개변수는 효과의 지속 시간을 지정합니다. "slow", "fast" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 애니메이션이 완료된 후 실행할 함수입니다.
다음 예제에서는 animate()메서드의 간단한 사용을 보여 줍니다. 250px의 왼쪽 속성에 도달할 때까지 <div> 요소를 오른쪽으로 이동합니다.
예시
$("button").click(function(){
$("div").animate({left: '250px'});
});
기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없습니다.
위치를 조작하려면 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정해야 합니다.
jQuery animate() - 여러 속성 조작
여러 속성을 동시에 애니메이션할 수 있습니다.
예시
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
animate() 메서드로 모든 CSS 속성을 조작할 수 있습니까?
예, 거의! 그러나 기억해야 할 한 가지 중요한 사항이 있습니다. animate() 메서드와 함께 사용할 때 모든 속성 이름은 카멜 케이스여야 합니다. padding-left 대신 paddingLeft, margin-right 대신 marginRight 등을 작성해야 합니다.
또한 핵심 jQuery 라이브러리에는 색상 애니메이션이 포함되어 있지 않습니다. 색상에 애니메이션을 적용하려면 jQuery.com에서 Color Animations 플러그인
을 다운로드해야 합니다
.
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가 이러한 메서드 호출로 "내부" 대기열을 생성합니다. 그런 다음 animate 호출을 ONE by ONE으로 실행합니다.
따라서 서로 다른 애니메이션을 수행하려는 경우 대기열 기능을 활용합니다.
실시예 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");
});
jQuery 연습
jQuery 효과 참조
모든 jQuery 효과에 대한 전체 개요를 보려면 jQuery 효과 참조 로 이동하십시오 .