jQuery 애니메이션
jQuery 효과 - 애니메이션
jQuery 애니메이션 - animate() 메서드
jQuery animate() 메서드는 사용자 정의 애니메이션을 만드는 데 사용됩니다.
구문:
필수 params 매개변수는 애니메이션을 구성하는 CSS 속성을 정의합니다.
선택적인 속도 매개변수는 효과의 지속 시간을 지정합니다. "느림", "빠름" 또는 밀리초 값을 사용할 수 있습니다.
선택적 콜백 매개변수는 애니메이션이 완료된 후 실행될 함수의 이름입니다.
다음 예제에서는 animate() 메서드의 간단한 적용을 보여줍니다. <div> 요소를 오른쪽으로 250픽셀 이동합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
참고: 기본적으로 모든 HTML 요소는 정적 위치를 가지며 이동할 수 없습니다.
위치를 조작해야 하는 경우 먼저 요소의 CSS 위치 속성을 상대, 고정 또는 절대로 설정하는 것을 잊지 마세요!
jQuery animate() - 여러 속성 조작
애니메이션 생성 중에 여러 속성을 동시에 사용할 수 있습니다.
참고: animate() 메서드를 사용하여 모든 CSS 속성을 작동할 수 있나요?
네, 거의 다 됐어요! 그러나 기억해야 할 중요한 사항이 하나 있습니다. animate()를 사용할 때 모든 속성 이름을 작성하려면 Camel 표기법을 사용해야 합니다. 예를 들어 padding-left 대신 paddingLeft를 사용해야 하고 margin-right 대신 marginRight를 사용해야 합니다. .
또한 핵심 jQuery 라이브러리에는 컬러 애니메이션이 포함되어 있지 않습니다.
컬러 애니메이션을 생성해야 하는 경우 jquery.com에서 컬러 애니메이션 플러그인을 다운로드해야 합니다.
jQuery animate() - 상대 값 사용
상대 값을 정의할 수도 있습니다(값은 요소의 현재 값에 상대적입니다). 값 앞에 += 또는 -=를 추가해야 합니다.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
jQuery animate() - 사전 정의된 값 사용
속성 값을 "표시", "숨기기" 또는 "토글"로 애니메이션할 수도 있습니다.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>예 실행 »
온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요
jQuery animate() - 대기열 기능 사용
기본적으로 jQuery는 애니메이션에 대한 대기열 기능을 제공합니다.
즉, 여러 개의 animate() 호출을 차례로 작성하면 jQuery가 해당 메서드 호출을 포함하는 "내부" 대기열을 생성한다는 의미입니다. 그런 다음 이러한 애니메이션 호출을 하나씩 실행합니다.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>예제 실행»
온라인 예를 보려면 "예제 실행" 버튼을 클릭하세요.
다음 예에서는 <div> 텍스트의 글꼴 크기:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("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");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>Run Instance»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
