[Effect] JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과. = animate메서드 = 애니메이트메서드)
https://homzzang.com/b/jquery-21
목차
jQuery animate() 메서드 vs.CSS transition 속성
animate() 구문
animate() 예제 - positon 쓰임새
animate() 예제 - 여러 CSS 속성 정의
animate() 예제 - 상대값 설정
animate() 예제 - 미리 정의된 값 이용
animate() 예제 - 대기열 기능 이용
animate() 예제 - 버튼 클릭 시 좌우 이동 토글
animate() 강의 좌표
jQuery animate() 메서드 vs.CSS transition 속성
jQuery animate()메서드
CSS transition 속성
animate() 구문
$(선택자).animate({CSS 정의},speed,callback );
[매개변수]
{jsCSS 정의} 움직이는 상태의 CSS. (※ 여러 개 나열 시, 쉼표(,)로 연결)
(예1) left: '200px' , opacity: '0.5' , width: '400px' , height: '150px' , lineHeight: '150px'
(예2) scrollTop: $("#player").offset().top-100
speed "slow" , "fast" , 1/1000초 이렇게 3가지 등록 가능. slow, fast 경우, 적을 때 반드시 따옴표로 묶어야 함.
1초 경우, 1000 입력. (숫자이므로 따옴표로 안 묶음.)
callback animate 완료 후 실행시킬 콜백함수
animate() 예제 - positon 쓰임새
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '200px'});
});
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>움직여라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
PS. 모든 HTML 요소는 기본적으로 CSS position 속성의 속성값이 static 임. 그 결과, 고정되어 움직이는 게 불가능. 요소를 움직이고자 할 경우, 우선 해당 요소의 CSS position 속성을 relative , fixed , absolute 중 하나로 설정.
animate() 예제 - 여러 CSS 속성 정의
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left: '200px' ,
opacity: '0.5' , width: '400px' , height: '150px' , lineHeight: '150px' }); });
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>움직여라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
PS.
animate() 메서드 안의 패럼 CSS엔 거의 대부분의 CSS 속성을 정의 가능 .
다만, CSS 속성 적을 땐 반드시, 하이픈( - )을 대신 낙타문자 (= 단어 중간에 대문자가 들어가는 글자)로 기재.
예를 들어, line-height 대신 lineH eight , maring-left 대신 marginL eft , padding-top 대신 paddingT op 형식으로.
그리고, color 관련 CSS 속성은 JQUERY 파일에 관련 코드가 포함이 안 되어 있어서 사용 불가.
만약, color 관련 CSS 속성을 이용하려면, 여기 에서 color 관련 플러그인 다운받아 설치하셔야 함.
※ 아래 메서드을 별도로 연결해 사용하면 글자색 변경 가능. 예제 보기 css ("color", "색상코드")
animate() 예제 - 상대값 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left: '200px' ,
width: '+=100px' , height: '+=50px' , lineHeight: '+=50px' }); });
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>움직이면서 커져라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
PS. 상대값 설정은 현재값을 기준으로 더하거나 뺀 값을 설정하는 걸 말함.+=
현재값을 기준으로 더하기 (예) width: '+=100px '
현재값을 기준으로 100px 더한 값으로 너비 변경
-=
현재값을 기준으로 빼기 (예) width: '-=100px '
현재값을 기준으로 100px 뺀 값으로 너비 변경
animate() 예제 - 미리 정의된 값 이용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div"). animate ({ height: ' toggle ' });
});
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>사라졌다 나타났다 해라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
PS.
미리 정의된 값, 즉, 현재 CSS에 있는 값을 이용하는 방법으로, hide, show, toggle 사용 가능.'hide' 현재 보이는 요소 숨기기. (예) height: 'hide''show' 현재 숨기기 된 요소 보이기. (예) height:'show''toggle' 현재 보이는 상태면 숨기고, 숨기기 된 상태면 보이기. (예) height:'toggle'
animate() 예제 - 대기열 기능 이용
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '200px', lineHeight: '200px', opacity: '0.4'}, "slow");
div.animate({width: '400px', opacity: '0.8'}, "slow");
div.animate({height: '100px', lineHeight:'100px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
});
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>변해라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '1.5em'}, "slow");
});
});
</script>
<style>
div {
margin-top:20px;
background:#fd86bf;
width:300px;
height:100px;
line-height:100px;
text-align:center;
position:absolute;
}
</style>
<button>변해라. 짠!!</button>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
PS. 1. 대기열 기능은 선택된 요소에 여러 개의 움직임을 순서대로 작동하게 하는 걸 말함. 2. 해당 선택자를 변수 에 담은 후 세미콜론 ( ; ) 을 찍은 후, 그 변수에 대해서 각각의 animate() 메서드를 세미콜론 ( ; ) 이용해 연결하면 됨.
animate() 예제 - 버튼 클릭 시 좌우 이동 토글
<style>
.box {width: 100px; height: 100px; background: red;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="box" class="box"></div>
<button type="button" onclick="move()" >클릭</button>
<script>
var margin = 0;
function move() {
margin = (margin == 0) ? 100 : 0;
$('#box').stop() .animate({
marginLeft: margin
});
}
</script>
결과보기
animate() 강의 좌표
바위처럼 님 - jQuery 4. animate()
https://youtu.be/CgagsNcCYY4
바위처럼 님 - jQuery 4. animate() + find(), filter()
https://youtu.be/E4Vih_rpwaM
주소 복사
랜덤 이동
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)
JQuery 관련글
코딩동강 관련글
HTML 관련글
CSS 관련글
JavaScript 관련글
PHP 관련글
SQL 관련글
Bootstrap 3 관련글