WEB/Javascript

[jQuery] Effect

MB Brad KWON 2014. 10. 22. 11:54

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

'WEB > Javascript' 카테고리의 다른 글

[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] install & syntax  (0) 2014.10.22