[jQuery] Effect

hide/show and toggle

    먼저, element를 숨기고 보이게만드는 hide/show가 있다. 이외에도 hide와 show를 번갈아서 사용하기 위한 toggle이라는 method도 있다. 사용법은 아래와 같다. 인자로 속도를 줄 수 있으며 속도의 단위는 milliseconds이다. milliseconds외에도 'fast'/'slow'로도 속도 인자를 줄 수 있다.

$("#show").click(function(){
  $("p").show();
});

$("button").click(function(){
  $("p").show("slow");
});

$("button").click(function(){
  $("p").hide(1000);
});

$("button").click(function(){
  $("p").toggle();
});

fadein / fadeout / fadeToggle / fadeTo

    먼저 설명했던 hide / show는 element를 나타내고 숨기기만 했지만 fade는 대부분이 알다시피 희미하게 사라지고 나타나는 효과를 가진다. fade에 관한 method를 대표적으로 4가지만 소개한다. fadein / fadeout은 말그대로 희미하게 사라지고 나타나는 효과를 지닌다. fadeToggle은 위에 있는 hide / show 글의 toggle처럼 fadein / fadeout 상태에 따라 번갈아 나타나도록 한다. fadeTo는 투명도를 나타내는 alpha 값을 개발자가 지정한 상태로 바꿀수 있다. 완전히 사라지거나 나타나지 않고 임의의 투명도를 지정하고 싶을 때 사용하기 좋은 method이다.

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

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

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

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

slideDown / slideUp / slideToggle

    slide method도 hide / show 와 같다고 보면 된다. 효과만 밀어내는듯이 나타나고 사라진다는 부분만 다르다.

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

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

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

animation

    임의의 animation을 정의하고 수행할 수 있는 method이다. 기본적인 사용 방법은 아래와 같다. 

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

    animation을 사용할 때, 여러개의 animation을 동시에 적용하기 위해서 아래와 같이 사용한다. 값을 줄 때는 절대값 혹은 상대값으로 줄 수 있으며 'fast', 'slow', 'toggle'와 같이 사전 정의된 값도 사용 가능하다.

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

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

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 

    animation을 사용할 때, 여러개의 animation을 순차적으로 적용해야할 경우에는 아래와 같이 element에 animation을 순서대로 정의하면 된다. event가 발생 했을 때, 위에부터 적용되어 animation이 실행된다.

$("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에서 수행되는 effect와 animation을 수행이 완료되기 전에 멈추고 싶을 때는 stop라는 method를 사용하면 된다.

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

출처 : http://www.w3schools.com