[jQuery] effect

hide(), show(), toggle() 함수

$(selector).hide(speed, callback);

$(selector).show(speed, callback);

$(selector).toggle(speed, callback);

slideDown() slideUp() slideToggle()

$(selector).slideDown(speed,callback); //두번째 매개변수에 함수를 줄 수 있음

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

-> speed 는 millisecond 나 혹은 "slow", "fast"

 

 

애니메이션은 함수가 호출하는 시점에서 실행되는 게 아니다

애니메이션마다 걸리는 시간이 있는데 함수를 호출한다고 전부 다 바로 실행되는 게 아니라 첫번째꺼가 끝나야 두번째가 실행된다. 그러기 위해 element마다 큐(줄) 같은 것이 있다.

<script>
$(document).ready(function(){
    $('#hide2').click(function() {
            $('#p21').hide('slow');
            $('#p22').hide('fast');
            $('#p23').hide(5000);
    });
    $("#show2").click(function(){
            $("#p21").show("slow");
            $("#p22").show("fase");
            $("#p23").show(2000);
    });
    $('#hide2').toggle(function() {
            $('#p21').toggle('slow');
            $('#p22').toggle('fast');
            $('#p23').toggle(5000, function(){alert('p23 종료')}); //5초 걸림
            alert("이건 언제 등장?"); //1. 클릭하자마자 동작한다 애니메이션 관련 된 건 등록만 하는 것, 알아서 자기 차례에 동적으로 진행한다 이게 블로킹 방식!! 하나 진행하는 동안은 다음꺼 진행 못하는 것을 말한다 
                                     //2. 코드는 바로 진행!!!! 별개로 진행진행. 
                                     //3. 바로 등장 <- 자바스크립트가 가지고 있는 non-blocking 방식
            //// $(selector).toggle(speed,callback); 두번째에 콜백함수 등장!
    });


    $("#fadeToggle2").click(function(){
    $("#p41").fadeToggle("slow");
    $("#p42").fadeToggle("fast");
    $("#p43").fadeToggle(2000);
    });

    // 투명도값: 0 ~ 1.0
     $("#fadeTo3").click(function(){ //0에 가까울수록 투명에 가까움
        $("#p51").fadeTo("slow", 0.15);
        $("#p52").fadeTo("slow", 0.4);
        $("#p53").fadeTo("slow", 0.7);
    });


    $("#slideUp").click(function(){
        $("#p61").slideUp();
        $("#p62").slideUp("slow");
        $("#p63").slideUp("fast");
        $("#p64").slideUp(2000);
    });
    $("#slideToggle").click(function(){
        // TODO
        $("#p61").slideToggle();
        $("#p62").slideToggle("slow");
        $("#p63").slideToggle("fast");
        $("#p64").slideToggle(2000, tada); 
    });
    function tada(){
        alert("짜잔"); //애니메이션이 끝나면 호출되는 함수
    }
});
</script>

 

 

 

 

거의 대부분의 css property에 대해 애니메이션이 가능하다

그러나 property 이름은 camel notation으로 되어야한다

즉 css에서 padding-left는 jquery 애니메이션에서는 paddingLeft이어야 한다

또한, 기본적으로 jquery 라이브러리에서는 color 애니메이션이 없다 하려면 추가적인 plugin을 포함해야 한다

 

 

animate() 함수 : css property에 대해 animation을 수행한다

$(selector).animate({params}, speed, callback); callback : 애니메이션이 끝나면 수행하는 함수이다

animate 매개변수는 object이다!

<script>
$(document).ready(function(){
	$('#btn01').click(function(){
        $('div#d01').animate({left: '250px'})
    });
    
    $('#btn02').click(function(){
    	$('div#d02').animate({
        left: '250', opacity: '0.5', height: '150px', width: '150px',
        })
    });
});
</script>

 

jquery는 상대적인 값(relative value)를 지정한 애니메이션이 가능하다

<script>
$(document).ready(function(){
    $('#btn03').click(function(){
        $('div#d03').animate({
        left: '250px', height: '+=50px', width: '+=50px',
    });
});
</script>

 

 

pre-fefined 값 설정이 가능하다 show(), hide(), toggle()

<script>
$(document).ready(function(){
    $('#btn04').click(function() {
        $('div#d04').anumate({
            width: 'toggle', //폭을 변경한다
            })
    });
});
</script>

 

애니메이션 queue 설정

동일한 element에 animate를 적용 -> 줄 서 있다 -> 총 3초 걸림 -> 애니메이션은 blocking 방식

<script>
$(document).ready(function(){
    $('#btn05').click(function(){
        let $div = $('div#05'); //제이쿼리는 $함수가 가능하다. selector 담는 함수를 $에 넣기
        $div.animate({heigth: '300px', opacity: '0.4'}, 1000);
        $div.animate({width: '300px', opacity: '0.8'}, 1000);
        $div.animate({width: '300px', opacity: '0.4'}, 500);
        $div.animate({width: '300px', opacity: '1.0'}, 500);
        alert('바로 실행! non-blocking 방식');
    });
});
</script>

 

jquery의 모든 action에 관한 메소드는 mathod chaining이 된다

$(selector).action().action().....

<script>
$(document).ready(function(){
    $('#btn07').click(function(){
        $('div#07').css('color', 'red')
        .slidUp(2000)
        .slideDown(2000);
    });
});
</script>

 

 

$(selector).stop(stopAll, goToEnd);

stopAll : 애니메이션 queue가 clear되는지 여부, 디폴트값은 false, 즉 중간에 stop 되면 현재 애니메이션만 중단되고 다음 애니메이션이 진행된다

goToEnd : stop() 될 때 곧바로 애니메이션의 끝 상태로 간다. 디폴트값은 false

<script>
$(document).ready(function(){
    $('#start').click(function(){
        $('div').animate({left: '100px'}, 5000);
        $('div').animate({fontSize: '3em'}, 5000);
    });

    //매개변수 없을 때의 stop은 현재 수행 중인 애니메이션만 중단한다
    $('#stop').click(function(){
        $('div').stop();
    });

    //애니메이션 큐에 있는 모든 애니메이션을 종료한다
    $('#stopAll').click(function(){
        $('div').stop(true);
    });

    //현재 진행중인 애니메이션이 끝으로 감->다음 애니메이션 실행
    //$(selector).stop(stopAll, goToEnd)
    $('#stopButFinish').click(function(){
        $('div').stop(false, true);
        //$("div").stop(true, true); //큐가 지워졌으니까 끝의 상태로 간다
    });
});
</script>