jQuery 공작소 : .animate()

<style type="text/css">
    .css_test {
        height : 430px;
        text-align : center;
    }
    .css_test img {
        width : 500px;
    }
</style>

<div class="css_test">
    버튼을 누르면 이미지의 크기가 바뀝니다.<br>
    <button onclick="$('[name=j_test]').animate({width : 100})" type="button">가로 100px</button>
    <button onclick="$('[name=j_test]').animate({width : '300'})" type="button">가로 300px</button>
    <button onclick="$('[name=j_test]').animate({'width' : '500px'})" type="button">가로 500px</button><br><br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/2570B33354D74FB12F" />
</div>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        width : 500px;
    }
</style>

<div class="css_test">
    버튼을 누르면 이미지의 크기가 바뀝니다.<br>
    <button onclick="$('[name=j_test]').animate({'width' : '50%'})" type="button">가로 50%</button>
    <button onclick="$('[name=j_test]').animate({'width' : '100%'})" type="button">가로 100%</button><br><br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/224D643854D74C4F15" />
</div>

<style type="text/css">
    .css_test {
        height : 450px;
        text-align : center;
    }
</style>

<div class="css_test">
    <button onclick="j_test_click()" type="button">눌러보세용</button><br><br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/25469641555AC5000B" width="500" />    
</div>

<script type="text/javascript">
    // 애니메이션은 순차적으로 실행됩니다
    // 아래 애니메이션은 동시에 실행되지 않습니다
    function j_test_click(){
        $('[name=j_test]').stop(); // 실행중인 애니메이션을 멈춘다 (버튼 연타에 대비한 중복실행 방지)
        $('[name=j_test]').animate({width:100}); // 실행 후 아래 실행
        $('[name=j_test]').animate({width:200}); // 실행 후 아래 실행
        $('[name=j_test]').animate({width:50}); // 실행 후 아래 실행
        $('[name=j_test]').animate({width:500});
    }
</script>

<style type="text/css">
    .css_test {
        height : 450px;
        text-align : center;
    }
</style>

<div class="css_test">
    <button onclick="j_test_click()" type="button">시작!</button>
    <button onclick="j_test_init()" type="button">복원</button><br><br>
    <img name="j_test2" src="https://t1.daumcdn.net/cfile/tistory/230D9C3454D7331920" />
</div>

<script type="text/javascript">
    function j_test_click(){
        $('[name=j_test2]').stop();
        $('[name=j_test2]').animate( { width:500, height:2 } ); // 동시에 두가지 실행
        $('[name=j_test2]').animate( { width:0 } );
    }

    function j_test_init(){
        $('[name=j_test2]').stop().css( { width:'auto', height:'auto' } ); // css 메서드 사용
    }
</script>

<style type="text/css">
    .css_test {
        height : 450px;
        text-align : center;
    }
</style>

<div class="css_test">
    <button onclick="j_test_click()" type="button">시작!</button>
    <button onclick="j_test_init()" type="button">복원</button><br><br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/2515ED4854D735161E" />
</div>

<script type="text/javascript">
    function j_test_click(){
        $('[name=j_test]').stop().animate({
            width:50,
            height:50,
            opacity:0.2 // 투명도 설정(소수점 단위) : 1 - 불투명, 0 - 투명
        }); // 줄바꿈해서 보기편하게 코딩! 마지막은 , 를 붙이지 않습니다.(자주하는 실수)
    }

    function j_test_init(){
        // css 메서드 사용
        $('[name=j_test]').stop().css({
            width:'auto',
            height:'auto'
        }).animate({
            opacity:1
        });
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        border-radius : 0;
        margin-bottom : 10px;
    }
</style>

<div class="css_test">
    물컹 물컹 이미지 : 마우스를 올려보세요.<br>
    jQuery UI 의 움직임 효과를 추가로 사용하였습니다.<br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/216F4139550B923E33" /><br>
    <img name="j_test" src="https://t1.daumcdn.net/cfile/tistory/213D684C550B9B3B0D" /><br>
</div>

<script type="text/javascript">
    function j_test_mover(o){
        $(o).stop().animate({'border-radius':120}, 1000, 'easeOutElastic');
    }

    function j_test_mout(o){
        $(o).stop().animate({'border-radius':1});
    }

    $('[name=j_test]').bind('mouseover', function(){
        j_test_mover(this);
    }).bind('mouseout', function(){
        j_test_mout(this);
    });
</script>

<style type="text/css">
    .css_test {
        margin : 20px auto 0 auto;
        text-align : right;
        width : 550px;
    }
    .css_test img {
        cursor : pointer;
        position : relative; /* 이 설정을 해주어야 자동차가 움직입니다 */
    }
</style>

<div class="ac">
    <button type="button" onclick="j_test_comeback()">복귀 버튼</button><br>
    아래 자동차를 클릭해 보세요.
</div>
<div class="css_test">
    <img onclick="j_test_gogo(this, 3000)" src="//superkts.com/img/css/car0194.gif" /><br>
    <img onclick="j_test_gogo(this, 2000)" src="//superkts.com/img/css/car0194.gif" /><br>
    <img onclick="j_test_gogo(this, 1000)" src="//superkts.com/img/css/car0194.gif" /><br>
    <img onclick="j_test_gogo(this, 500)" src="//superkts.com/img/css/car0194.gif" /><br>
    <img onclick="j_test_gogo(this, 250)" src="//superkts.com/img/css/car0194.gif" /><br>
    <img onclick="j_test_gogo(this, 10000)" src="//superkts.com/img/css/car0194.gif" /><br>
</div>

<script type="text/javascript">
    function j_test_gogo(o, n){
        $(o).stop().animate({
            left:-500,
            top:220
        }, n);
    }

    function j_test_comeback(){
        $('.css_test img').stop().animate({
            left:0,
            top:0
        }, 1000, 'easeOutElastic');
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test span { /* 버튼 */
        border-radius : 5px;
        border : 3px solid gray;
        box-shadow : 0 0 3px silver;
        cursor : pointer;
        display : inline-block;
        line-height : 150%;
        margin : 2px 0;
        padding : 3px;
    }
    .css_test .rock { /* 돌 이미지 */
        left : -150px;
        position : relative;
        top : -570px;
        width : 80px;
    }
</style>

<div class="css_test">
    <img src="//superkts.com/img/pisa.gif" style="height:600px;" />
    <img class="rock" src="//superkts.com/img/hobbang06.gif" onclick="alert('저말고 아래 버튼을 눌러주세요. ㅎ')" />
    <div>
        <span onclick="j_test_drop('linear')">linear</span>
        <span onclick="j_test_drop('swing')">swing</span>
        <span onclick="j_test_drop('easeInQuad')">easeInQuad</span>
        <span onclick="j_test_drop('easeOutQuad')">easeOutQuad</span>
        <span onclick="j_test_drop('easeInOutQuad')">easeInOutQuad</span>
        <span onclick="j_test_drop('easeInCubic')">easeInCubic</span>
        <span onclick="j_test_drop('easeOutCubic')">easeOutCubic</span>
        <span onclick="j_test_drop('easeInOutCubic')">easeInOutCubic</span>
        <span onclick="j_test_drop('easeInQuart')">easeInQuart</span>
        <span onclick="j_test_drop('easeOutQuart')">easeOutQuart</span>
        <span onclick="j_test_drop('easeInOutQuart')">easeInOutQuart</span>
        <span onclick="j_test_drop('easeInQuint')">easeInQuint</span>
        <span onclick="j_test_drop('easeOutQuint')">easeOutQuint</span>
        <span onclick="j_test_drop('easeInOutQuint')">easeInOutQuint</span>
        <span onclick="j_test_drop('easeInSine')">easeInSine</span>
        <span onclick="j_test_drop('easeOutSine')">easeOutSine</span>
        <span onclick="j_test_drop('easeInOutSine')">easeInOutSine</span>
        <span onclick="j_test_drop('easeInExpo')">easeInExpo</span>
        <span onclick="j_test_drop('easeOutExpo')">easeOutExpo</span>
        <span onclick="j_test_drop('easeInOutExpo')">easeInOutExpo</span>
        <span onclick="j_test_drop('easeInCirc')">easeInCirc</span>
        <span onclick="j_test_drop('easeOutCirc')">easeOutCirc</span>
        <span onclick="j_test_drop('easeInOutCirc')">easeInOutCirc</span>
        <span onclick="j_test_drop('easeInElastic')">easeInElastic</span>
        <span onclick="j_test_drop('easeOutElastic')">easeOutElastic</span>
        <span onclick="j_test_drop('easeInOutElastic')">easeInOutElastic</span>
        <span onclick="j_test_drop('easeInBack')">easeInBack</span>
        <span onclick="j_test_drop('easeOutBack')">easeOutBack</span>
        <span onclick="j_test_drop('easeInOutBack')">easeInOutBack</span>
        <span onclick="j_test_drop('easeInBounce')">easeInBounce</span>
        <span onclick="j_test_drop('easeOutBounce')">easeOutBounce</span>
        <span onclick="j_test_drop('easeInOutBounce')">easeInOutBounce</span>
    </div>
    위 효과 이름을 눌러보세요. ^^<br>
    easeOutBounce 효과가 제일 적절해 보이네요.
</div>

<script type="text/javascript">
    function j_test_drop(v){ // 돌 낙하
        $('.css_test .rock').stop().css({top:-570}).animate({top:10}, 1000, v);
    }
</script>

<style type="text/css">
    .css_test {
        text-align : center;
        height : 500px;
    }
    .css_test img {
        margin-top : 15px;
        opacity : 0;
        width : 0;
    }
</style>

<div class="css_test">
    <button type="button" onclick="j_test_show1()">눌러보세용1</button>
    <button type="button" onclick="j_test_show2()">눌러보세용2</button>
    <button type="button" onclick="j_test_show3()">눌러보세용3</button><br>
    <img src="//superkts.com/img/css/cat.gif" />
</div>

<script type="text/javascript">
    function j_test_init(){ // 이미지 초기화
        $('.css_test img').stop().css({
            width:0,
            opacity:0
        });
    }

    function j_test_show1(){
        j_test_init();
        $('.css_test img').stop().animate({
            width:500,
            opacity:1
        }, 1000, function(){
            alert('냥'); // 함수형태로 바로 실행하기
        });
    }

    function j_test_show2(){
        j_test_init();
        $('.css_test img').stop().animate({
            width:500,
            opacity:1
        }, 1000, j_test_alert2); // 함수 실행 (이름으로)
    }
    function j_test_alert2(){
        alert('냥냥냥');
    }

    function j_test_show3(){
        j_test_init();
        $('.css_test img').stop().animate({
            width:500,
            opacity:1
        }, 1000, function(){
            j_test_alert3('멍멍?'); // 매개변수 넣어 다른함수 호출
        });
    }
    function j_test_alert3(msg){
        alert(msg);
    }

</script>

<style type="text/css">
    .css_test {
        text-align : center;
    }
    .css_test img {
        margin-top : 10px;
        width : 100px;
    }
</style>

<div class="css_test">
    <button type="button" onclick="$('.css_test img').animate({width:'+=50'})">커져라 !!</button>
    <button type="button" onclick="$('.css_test img').animate({width:'-=50'})">작아져라 !!</button><br>
    <img src="https://t1.daumcdn.net/cfile/tistory/27042F3354D74FB30A" />
</div>

<style type="text/css">

    #css_test {
        background-color : black;
        background-repeat : no-repeat;
        height : 550px;
        border-radius : 10px;
    }

    #css_test.ghost1 {
        background-image : url('//superkts.com/img/css/ghost.gif');
        background-position : 50% 50%;
        background-size : 0;
    }

</style>

<script type="text/javascript">

    var chk = false;

    function ghostIn(){
        if(chk) return;
        chk = true;
        $('#css_test').stop().animate({'background-size':'+=80%'}, 500, ghostOut);
    }

    function ghostOut(){
        $('#css_test').stop().animate({'background-size':'-=80%'}, 5000, ghostEnd);
    }

    function ghostEnd(){
        chk = false;
    }

</script>

<div class="bold red ac pd5">약간 무서울 수 있습니다. 절대 심장이 약하신 분은 하지 마세요 !!!</div>
<div id="css_test" class="ghost1"></div>
<div class="mt5 ac">
    <button type="button" onclick="ghostIn()">준비됬으면 누르세요 !</button>
</div>

<style type="text/css">
    .css_test {
        text-align : center;
        height : 500px;
    }
    .css_test img {
        margin-top : 10px;
    }
</style>

<div class="css_test">
    보였다 안보였다 애니메이션 입니다.<br>
    <button type="button" onclick="$('.css_test img').stop().animate({width:'toggle'})">toggle 1</button>
    <button type="button" onclick="$('.css_test img').stop().animate({width:'toggle'}, 2000)">toggle 2</button>
    <button type="button" onclick="$('.css_test img').stop().animate({width:'toggle'}, 1000, 'easeInOutElastic')">toggle 3</button>
    <button type="button" onclick="$('.css_test img').stop().animate({width:'toggle'}, 2000, 'easeInOutElastic', function(){ alert('데헷 ^^*') })">toggle 4</button>
    <br>
    <img src="https://t1.daumcdn.net/cfile/tistory/213D5338550B92391D" />
</div>

<style type="text/css">
    .css_test {
        text-align : center;
        height : 150px;
    }
</style>

<button type="button" onclick="$('.css_test').animate({'font-size':'70px'}, 2000, 'easeInOutElastic')">커져라</button>
<button type="button" onclick="$('.css_test').animate({'font-size':'30px'}, 2000, 'easeInOutElastic')">작아져라</button>

<div class="css_test" style="font-size:30px;">
    제이쿼리 공작소
</div>