• Q&A
  • 회원가입
  • 로그인

[Effect] JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과. = animate메서드 = 애니메이트메서드)

337  
목차
  1. jQuery animate() 메서드 vs.CSS transition 속성
  2. animate() 구문
  3. animate() 예제 - positon 쓰임새
  4. animate() 예제 - 여러 CSS 속성 정의
  5. animate() 예제 - 상대값 설정
  6. animate() 예제 - 미리 정의된 값 이용
  7. animate() 예제 - 대기열 기능 이용
  8. animate() 강의 좌표
 

jQuery animate() 메서드 vs.CSS transition 속성

 

jQuery animate()메서드

  • CPU에서 처리. 
  • 리소스 많이 차지.

 


CSS transition 속성

  • GPU에서 처리. 
  • 리소스 적게 차지.

 

 

animate() 구문

 

$(선택자).animate({CSS 정의},speed,callback);

 


[매개변수]

 

{CSS 정의}
움직이는 상태의 CSS. 

speed
"slow" , "fast" , 1/1000초   이렇게 3가지 등록 가능.  
※ slow, fast 경우, 적을 때 반드시 따옴표로 묶어줘야 함.

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 속성을 relativefixedabsolute중 하나로 설정.

 

 

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 대신 lineHeight , maring-left 대신 marginLeft , padding-top 대신 paddingTop 형식으로.

그리고, 
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() 강의 좌표

 

바위처럼 님 - jQuery 4. animate()

https://youtu.be/CgagsNcCYY4

 

바위처럼 님 - jQuery 4. animate() + find(), filter()

https://youtu.be/E4Vih_rpwaM

 



찾아주셔서 감사합니다. Since 2012