[Effect] JQ - animate() 메서드 ★★★★★ - 움직이게 하기. (= 움직임 실행/설정 = 동적 애니 효과. = 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'});

    });

});

</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 대신 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(){ 

        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>

 

결과보기