jQuery - Effect

효과(Effect)

jQuery는 Hide, Show, Toggle, Slide, Fade, and Animate와 같은 다양한 Effect를 지원합니다. 이는 JavaScript에 비해서 훨씬 간편하게 다양한 Effect 들을 제어할 수 있습니다. jQuery를 통해서 사용할 수 있는 효과들과 그 내용들을 다음과 같습니다.

메소드(Method)	효과(Effect)
show()	해당 html 요소를 표시함
hide()	해당 html 요소를 숨김
show(speed, callback)	speed - html요소가 나타나는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - 요소를 표시하고 나서 실행할 함수
hide(speed, callback)	speed - html요소가 숨겨지는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) callback - 요소를 숨기고 나서 실행할 함수
toggle()	hide 상태에서 show 상태로, show 상태에서 hide 상태로 전환
toggle(speed, callback)	speed - html 요소가 나타내는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - toggle을 실행하고 나서 실행할 함수

 

기본적으로 hide(), show() method는 다음과 같은 syntax로 사용할 수 있습니다.

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

위의 syntax에서 "speed" parameter는 optional하게 사용되며, element가 hide/show 되는 속도를 지정하는 목적으로 사용합니다. 해당 parameter는 "slow", "fast" 또는 milisecond를 값으로 가질 수 있습니다.

 

"callback" parameter는 hide/show 효과가 종료된 다음 실행할 method를 지정하는 목적으로 사용됩니다. "speed" parameter와 동일하게 optional 하게 사용 됩니다.

 

hide()

아래의 코드는 <p> element를 클릭했을 때 해당 요소를 숨기는 기능을 작성하는 예시 코드 입니다.

<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>

 

show()

그리고 아래와 같이 show() method를 사용함으로서 반대로 hide되었던 element를 다시 나타나게 할 수 있습니다.

<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>

toggle()

그리고 이 toggle method를 사용함으로써 hide() / show() method의 동작을 하나로 묶는 것이 가능합니다. 즉, show된 상태라면 hide되고, hide된 상태라면 show 되도록  설정할 수 있으며 show와 hide method를 분리하여 개별적으로 사용할 필요없이 이를 하나의 method로 처리할 수 있도록 해줍니다. toggle method는 아래와 같은 syntax를 사용합니다.

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

마찬가지로 "speed" parameter는 효과가 나타나는 속도를 지정할 수 있고 "slow", "fast", miliseconds를 사용할 수 있습니다. 그리고 callback은 효과가 종료된 후 실행할 method를 지정하는 용도로 사용할 수 있으며 모두 optional 합니다. 아래는 toggle method를 사용한 예시 입니다.

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>

 

페이딩(fading)

jQuery를 이용해서 페이딩 효과를 줄 수 있습니다. 페이딩과 관련해서 사용할 수 있는 메소드는 다음과 같습니다.

메소드(method)	내용
fadeIn()	숨겨진 요소를 페이드 효과로 나타냄
fadeIn(speed, callback)	speed - html요소가 나타나는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - 페이드하고 나서 실행할 함수
fadeOut()	보이는 요소를 페이드 아웃효과로 숨김
fadeOut(speed, callback)	speed - html요소가 숨겨지는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - 페이드 아웃하고 나서 실행할 함수
fadeToggle()	숨겨진 상태인 경우 fadeIn을, 나타나 있는 경우 fadeOut을 실행
fadeToggle(speed, callback)	speed - html요소가 나타나거나 숨겨지는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - fadeToggel 하고 나서 실행할 함수
fadeTo(speed, opacity, callback)	해당 요소를 지정된 투명도값으로 페이딩(투명도는 0~1 사이의 값) speed - 효과가 적용되는 속도를 지정 (밀리초 단위를 사용하며 값이 클수록 효과가 진행되는 속도가 느려짐) (slow, fast를 사용하여 지정하는 것도 가능함) callback - fadeTo() 하고 나서 실행할 함수

뭔가 되게 많아보이지만 실질적으로 다음 4가지 종류로 구분할 수 있습니다.

1. fadeIn()
2. fadeOut()
3. fadeToggle()
4. fadeTo()

 

fadeIn()

fadeIn method는 특정 hiding 되어 있는 element를 pade in 효과를 통해 나타나도록 합니다 (서서히 나타나는 형태). 그리고 해당 method는 아래의 syntax 구조로 사용할 수 있습니다.

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

speed, callback parameter는 이전에 살펴본 내용과 동일합니다.

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

fadeOut()

fadeOut method는 특정 visible한 상태의 element를 pade out 효과를 통해 사라지도록 합니다. (서서히 사라지는 형태). 그리고 해당 method는 아래의 syntax 구조로 사용할 수 있습니다.

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

speed, callback parameter는 이전에 살펴본 내용과 동일합니다.

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

fadeToggle()

fadeToggle method는 fadeIn/fadeOut method를 하나로 합친 형태로 이해하면 됩니다. 즉, fadeOut 되어 있는 element는 fadeIn으로 처리하고, fadeIn 되어 있는 element는 fadeOut으로 처리합니다. 해당 method는 아래와 같은 syntax로 사용되며,

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

speed, callback parameter는 이전에 살펴본 내용과 동일합니다.

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});

 

fadeTo()

fadeTo method는 특정 element를 parameter를 통해 별도로 지정한 opacity만큼 fade 할 때 사용합니다. 여기서 opacity는 0 ~ 1 사이의 값이며 1에 가까울수록 불투명 합니다. 해당 method는 아래와 같은 syntax 구조를 사용합니다.

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

여기서 중요한 점은 fadeTo method에서는 "speed", "opacity"는 의무적으로 주어져야 하고, "callback" parameter만 optional 합니다. 각 parameter들이 가지는 의미는 이전에 살펴본 내용과 동일 합니다.

 

 

슬라이딩(Sliding)

jQuery를 이용해서 요소를 위아래로 Sliding하는 형태로 표현하는 효과를 줄 수 있습니다. Sliding과 관련해서 사용되는 메소드의 종류는 다음과 같습니다.

메소드(Method)	내용
slideDown()	html 요소를 아래로 슬라이드
slideDown(speed, callback)	speed - 효과의 지속시간 (slow, fast를 인자로 사용할 수 있으며, 밀리초 값도 사용할 수 있음) callback - 슬라이딩이 완료된 후 실행될 함수
slideUp()	html 요소를 위로 밀어올림
slideUp(speed, callback)	speed - 효과의 지속시간 (slow, fast를 인자로 사용할 수 있으며, 밀리초 값도 사용할 수 있음) callback - 슬라이딩이 완료된 후 실행될 함수
slideToggle()	html요소가 숨겨진 경우 아래로 슬라이드 html요소가 나타나있는 경우 위로 슬라이드
slideToggle(speed, callback)	speed - 효과의 지속시간 (slow, fast를 인자로 사용할 수 있으며, 밀리초 값도 사용할 수 있음) callback - 슬라이딩이 완료된 후 실행될 함수

마찬가지로 크게 세 종류로 분류하면 아래와 같이 나눌 수 있습니다.

1. slideDown()
2. slideUp()
3. slideToggle()

slideDown()

특정 element가 slide down 형태로 나타나도록 할 때 사용합니다. 해당 method는 다음과 같은 syntax를 사용합니다.

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

"speed", "callback" parameter 모두 optional 이며, 이전에 살펴본 내용과 동일 합니다.

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp()

특정 element가 slide up 형태로 사라지도록 할 때 사용합니다. 해당 method는 다음과 같은 syntax를 사용합니다.

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

"speed", "callback" parameter 모두 optional 이며, 이전에 살펴본 내용과 동일 합니다.

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle()

slideDown / slideUp method를 하나로 합쳐놓은 형태로 이해하면 됩니다. slideUp된 상태의 element라면 slideDown을, slideDown된 상태의 element라면 sldieUp을 수행 합니다. 해당 method는 다음과 같은 syntax를 사용합니다.

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

마찬가지로 "speed", "callback" parameter 모두 optional 이며, 이전에 살펴본 내용과 동일 합니다.

$("#flip").click(function(){
  $("#panel").slideToggle();
});

 

 

애니메이션(Animation)

jQuery를 사용해서 우리는 다양한 애니메이션 효과를 각 요소들에 부여할 수 있습니다. jQuery에서 animate() 메소드를 사용함으로서 사용자 정의 애니메이션을 작성하고 구현할 수 있습니다. animate() 메소드는 다음과 같은 syntax로 사용합니다.

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

"params" parameter는 필수적으로 전달되어야 하며, animate 할 CSS property를 정의하는 부분 입니다. 그리고 이전에 살펴본 내용과 동일하게 "speed" parameter는 효과의 지속시간이며 slow, fast 또는 milisecond 값을 사용할 수 있고, callback 매개변수는 애니메이션이 완료된 후에 실행될 함수 입니다. 이 둘은 모두 optional 입니다.

 

아래의 예시코드는 특정 element를 absolute postion에서 오른쪽으로 250px만큼 이동하도록 하는 코드 입니다. 단, 여기서 주의할 점은 모든 html element들은 기본적으로 static position을 사용한다는 점입니다. 이러한 경우 다음과 같은 코드를 작성해도 element를 이동시키는 것이 불가능 합니다. 따라서 element를 이동시키는 코드가 정상적으로 동작하기 위해서는 해당 element의 positon이 relative, fixed, or absolute 중 하나여야 합니다.

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'});
  });
});

또한 다음과 같이 여러 개의 CSS property를 한번에 전달하는 것도 가능합니다.

$("button").click(function(){
  $("div").animate({
    left: '250px',
    opacity: '0.5',
    height: '150px',
    width: '150px'
  });
});

그렇다면 다음과 같은 궁금증을 가질 수 있습니다.

 

그렇다면 animate method를 통해서 모든 CSS Propertise를 다룰 수 있는 가?

 

맡습니다. 하지만 모두는 아니고 "거의"라고 표현할 수 있습니다. 여기서 주의해야할 점이 있는 데 그것은 바로 animate() method 사용 시 모든 CSS Property name은 "camel-cased"로 사용되어야 한다는 점입니다. 즉, padding-left와 같은 속성을 "paddingLeft"의 형태로 작성해야 합니다.

 

또한 jQuery에는 color와 관련된 animation은 포함되지 않습니다. 만약 jQuery를 사용해서 color 관련 animation을 구현하고 싶다면 추가적인 plugin을 다운로드하여 사용해야 합니다.

 

Queue Functionality

만약 아래와 같이 하나의 element에 대해서 여러 개의 animate method가 사용되었다고 가정해보겠습니다. 이러한 경우 animate method는 어떻게 처리될까요? 위의 제목에서 알 수 있듯이 이렇게 작성된 경우 jQuery는 내부적으로 Queue를 생성하여 각 animate method의 내용을 "순차적으로 한번에 하나씩" 처리하게 됩니다.

$("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");
});

 

 

중지 애니메이션(Stop Animation)

jQuery stop() method는 animation이나 effect가 끝나기 전에 중지하는 목적으로 사용합니다. stop() 메소드는 다음과 같은 syntax로 사용합니다.

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

"stopAll", "goToEnd" parameter는 모두 Optinal이며 의미하는 내용은 다음과 같습니다.

stopAll - 애니메이션 큐 도 지워야 하는 지에 대한 여부를 지정합니다. 기본값은 false를 사용합니다.

(현재 진행 중인 애니메이션만 중지되어서 대기중인 애니메이션을 나중에 다시 실행하는 것이 가능합니다.)

goToEnd - 현재 애니메이션을 즉시 완료할 지에 대한 여부를 지정합니다. 기본값은 false를 사용합니다.

(현재 수행 중인 수준까지만 animation을 진행하고 정지합니다. animation을 마무리 짓지 않습니다.)

$("#stop").click(function(){
  $("#panel").stop();
});

해당 method는 해당 예시코드를 보기보다는 직접 실행해보면서 각 parameter에 따라 어떠한 차이가 발생하는 지를 이해하는 것이 더 좋습니다.

 

 

콜백(Callback)

자바스크립트 문은 한번에 한줄씩 실행됩니다. 그런데 Effect를 사용하게 되면 Effect가 완전히 완료되지 않았음에도

다음 줄의 코드를 실행하게 되는 경우가 있습니다. 그렇기 때문에 이를 방지하는 목적으로 Callback function을 사용합니다. 이전에 계속 살펴봤던 메소드 들에서 볼 수 있듯이 Callback을 사용하면 Effect가 완전히 완료된 후에 함수를 실행할 수 있기 때문에 위에서와 같은 오류를 방지할 수 있습니다.

$("button").click(function(){
  $("p").hide("1000", function(){
    alert("The paragraph is now hidden");
  });
});

$("button").click(function(){
  $("p").hide(1000);
  alert("The paragraph is now hidden");
});

단순히 callback을 사용했는지 안했는지에 대한 차이만으로 다음 위의 두 코드의 실행결과는 달라집니다. callback의 개념을 이해하고 위의 두 코드의 실행결과가 어떻게 달라질 지 예측해보시기 바랍니다. 실제로 첫번째 예시의 경우, effect가 완전히 종료된 후에 alert가 나타나지만, 두번째 예시의 경우, effect가 완전히 종료되지 않은 상태에서 alert가 나타나는 것을 확인할 수 있습니다. 따라서, 특정 logic이 effect가 완전히 종료된 후 실행되어야 함을 보장하고 싶다면, callback이 이를 위한 좋은 옵션이 될 수 있습니다.

 

 

 

체인(Chaining)

지금까지 위에서 살펴본 내용들은 모두 한번에 하나씩 jQuery 문을 작성해서 사용했습니다. 그러나 Chaning을 통해서 동일한 element에 대해 여러 jQuery 명령을 하나씩 실행할 수 있습니다. 동작을 연결하는 방법은 아래와 같이 단순히 이전동작의 뒤에 연결할 동작은 붙여주면 됩니다.

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

그런데 위와 같이 동작을 계속 연결하다보면 한 라인의 코드가 지나치게 길어질 수도 있습니다. 그러나 jQuery에서는 구문의 형식에 있어서 공백이나 개행을 허용하기 때문에 코드의 가독성을 높일 수 있는 방향으로 코드 작성자가 자유롭게 구성해주면 됩니다.

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

즉, 첫번째 코드와 두번째 코드는 모두 정상작동하며 동일한 동작을 수행합니다.