[jQuery] 2. jQuery 효과, Callback과 Chaining

※ 본 내용은 w3schools jQuery 튜토리얼에 잡담, 추가로 검색해서 넣은 내용 등으로 이루어져 있으므로

원래 내용은 아래 링크를 참고하자.

https://www.w3schools.com/jquery/default.asp

04 jQuery 효과

 1) Hide / Show

말 그대로 HTML 요소들을 숨기거나 나타낼 수 있는 효과이다.

$(selector).hide() 또는 show() 이렇게 쓰면되는데 변수를 통해 추가적인 옵션을 줄 수도 있다.

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

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

메소드 안에 이런 식으로 사라지거나 나타나게 할 speed("slow"/"fast"/mills), callback 함수를 변수로 넣으면 된다. 

둘 다 선택적 매개 변수이므로 안넣어도 상관은 없다.

callback 함수는 뒤에서 다룰거라 지금은 그냥 hide/show 메소드가 끝나면 그 뒤에 부를 함수 정도로만 생각하면 되겠다.

직접 실행해보면 알겠지만 생각보다 부드러운 애니메이션을 제공한다.

 2) Fade

PPT든 웹이든 애니메이션이든 갑자기 뿅하고 사라지는 것보단 사르르 사라지는게 더 있어보이는 법이다.

fadeIn(), fadeOut(), fadeToggle(), fadeTo() 네가지 메소드가 있는데

fadeIn과 fadeOut은 우리가 생각하는 페이드인, 페이드아웃과 마찬가지로 스르륵 나타나거나 스르륵 사라지는 효과이고

fadeToggle은 선택된 요소가 fadeOut 상태면 fadeIn으로, fadeIn 상태면 fadeOut으로 자동으로 작동시켜준다.

이 세가지 메소드는 이전의 Hide/Show 메소드와 마찬가지로 두가지 변수를 넣을 수 있다.

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

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

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

둘다 선택적 매개 변수라 아무것도 안넣거나 하나만 넣거나 둘 다 넣거나 상관없이 잘 작동된다.

fadeTo는 내가 원하는 불투명도까지 fade시키는 메소드이다.

현재 상태와 설정한 불투명도에 따라 fadeIn, fadeOut 효과 모두 줄 수 있다.

$(selector).fadeTo(speed, opacity, callback);

이전의 메소드들과는 다르게 speed와 opacity는 필수 매개 변수로 반드시 넣어야 한다.

opacity가 내가 원하는 불투명도를 설정하는 변수로 0에서 1 사이의 수만 넣을 수 있다.(0.1, 0.75 등등)

callback은 선택적 매개 변수이니 상황에 따라 결정하면 된다.

 3) Slide

Slide는 말 그대로 어떤 요소에 sliding 효과를 넣는 것이다.

버튼을 누르면 텍스트 박스가 촤르르 펼쳐진다든지.. 그런 효과이다.

slideDown(), slideUp(), slideToggle() 세가지 메소드가 있는데

slideDown, slideUp은 말 그대로 슬라이드를 내리고 올리는 효과이고

slideToggle은 fadeToggle처럼 선택한 대상이 현재 내려가있으면 올리고, 올라가있으면 내려준다.

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

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

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

세가지 메소드 전부 speed와 callback 메소드를 변수로 받는데

둘 다 선택적 매개 변수이므로 안써도 별 문제가 없다.

 4) Animate

Animate는 선택한 요소의 크기, 위치, 투명도 등의 속성을 애니메이션을 넣어 바꿔준다.

$(selector).animate({params},speed,callback);

세 변수 중에서 params만 필수 매개 변수인데 {left: '250px'} 처럼 변경하고 싶은 속성과 값을 넣으면 된다.

아래처럼 한번에 여러 속성을 변경하는 것도 가능하다.

$("button").click(function(){

    $("div").animate({

        left: '250px',

        opacity: '0.5',

        height: '150px',

        width: '150px'

    });

}); 

실제로 사용할 때는 left: '250px' 처럼 정확한 값을 넣어도 되지만

+=와 -=를 이용해서 left: '+=20px' 같이 상대적인 값을 넣을 수도 있고,

'show'/'hide'/'toggle' 값을 넣을 수도 있다. (효과는 앞에서 봤던 hide/show/toggle과 같다.)

animate 메소드를 쓸 때 주의할 점은 원래 HTML 요소들의 위치는 static이라 움직일 수가 없기 때문에

위치를 변경하려면 반드시 선택한 요소의 position 속성이 relative, fixed, absolute 셋 중에 하나여야 한다는 것이다.

또, 속성이름은 반드시 camel-case로 적어야 한다. 예를 들어 padding-left 속성을 변경하고 싶다면 paddingLeft 로 적어야 한다.

animate 메소드로 거의 모든 CSS 속성을 다룰 수 있지만 color 속성에 관련된 애니메이션은 없어서 플러그인을 추가로 받아야만 쓸 수 있다.

(물론 애니메이션없이 색깔만 바꾸는 것은 가능하다.)

위에서 했던 것처럼 animate 한 메소드 안에 여러 변경값을 넣어서 한 번에 변화시킬 수도 있지만

$("button").click(function(){

    var div = $("div");

    div.animate({height: '300px', opacity: '0.4'}, "slow");

    div.animate({width: '300px', opacity: '0.8'}, "slow");

    div.animate({height: '100px', opacity: '0.4'}, "slow");

    div.animate({width: '100px', opacity: '0.8'}, "slow");

});  

이런 예처럼 메소드를 다 분리하면 위에서부터 차례대로 queue에 넣어 그 순서대로 animate가 실행된다.

 5) Stop

stop은 slide나 animate같은 효과 메소드가 동작하고 있을 때 동작을 멈추는 메소드이다.

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

두 변수 모두 선택적 매개 변수라 안써도 되긴 하지만 default 값들을 유의해서 볼 필요가 있는 거 같다.

stopAll은 현재 queue에 있는 모든 애니메이션들을 멈출 것인지에 대한 변수로 default 값은 false로 되어있다.

stopAll이 false이면 현재 진행되던 애니메이션은 멈추지만 queue에 있던 다음 애니메이션부터는 계속 진행되고,

반대로 true이면 queue에 있던 모든 애니메이션이 멈춘다.

goToEnd는 현재 애니메이션을 멈췄을 때 그 애니메이션을 완료할 것인지에 대한 변수로 default 값은 false이다.

goToEnd가 false이면 애니메이션이 진행되던 그대로 멈추고, true이면 그 애니메이션이 완료된 형태로 멈춘다.

예를 들어 slideDown 하던 중에 stop 메소드를 실행시키면 goToEnd가 false일 때는 stop을 실행시켰던 그 때의 상태로 멈추고

goToEnd가 true이면 slideDown이 완료되어 다 내려온 상태로 멈추게 됩니다.

jQuery의 주요 effect들은 다 소개를 한 것 같다.

이 외에도 effect가 몇개 더 있긴한데 그건 따로 레퍼런스를 참고하도록 하자.

https://www.w3schools.com/jquery/jquery_ref_effects.asp

05 Callback과 Chaining

 1) Callback

JavaScript는 코드를 한줄씩 차례대로 실행시키기 때문에 이전 챕터에서 배웠던 effect가 아직 덜끝났는데도 다음 라인이 실행될 수 있다.

이런 사태를 막기위해 callback 함수가 존재하는데, callback 함수는 현재 effect가 다 끝난 후에 실행된다.

예제로 이전에 봤던 hide 메소드를 다시 생각해보자.

hide의 기존 문법이었던 $(selector).hide(speed, callback) 에서 speed와 callback을 넣으면 이런 형태가 된다.

$("button").click(function(){

    $("p").hide("slow", function(){

        alert("The paragraph is now hidden");

    });

}); 

이 예제를 실행하면 모든 p요소들이 다 사라진 후 alert 창이 뜨게된다.

callback 함수를 쓰지않고 그냥 hide 다음에 alert를 실행하면 effect와 상관없이 바로 alert창이 뜬다.

따라서 사용한 효과와 그 다음 실행될 메소드의 순서가 중요할 때는 callback 함수를 이용하면 된다.

 2) Chaining

jQuery의 Chaining은 기존 자바에서 사용되던 메소드 체이닝 패턴을 생각하면 되겠다.

date.setYear().setMonth().setDay() 처럼 메소드를 줄줄이 호출하는 패턴인데 jQuery에서도 이 패턴을 사용할 수 있다.

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

이렇게 메소드 체이닝을 사용하면 일일이 한 줄씩 코드를 작성하지 않아도 메소드들이 차례대로 실행된다.

메소드를 계속 이어써서 한 줄이 너무 길어질 때는 적절하게 엔터를 넣어도 컴파일러가 잘 읽어준다.