hide - show

 

단어 그대로 보여주기, 숨기기, 토글 효과.

 

 

1. hide - show

fade-in out 등 다양한 효과들과 혼합하여 사용 가능하다.

기본 문법은 아래와 같다.

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

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

 

- speed : "slow", "fast" 등으로 속도 조절 또는 ms 단위로 시간 제어 설정 ex:: hide("slow" or 5000)

speed를 설정하지 않거나 0이면 즉시 사라지거나 나타난다.

- callback : 효과가 실행 -> 종료된 후 호출되는 함수.

아래의 문장은 p태그가 숨겨진 후 function을 실행하여 alert이 발생한다.

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

 

 

2. toggle

hide와 show 가 합쳐진 기능이라 생각하면 된다.

아래는 기본 문법이다.

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

 

speed와 callback 은 hide-show와 동일하다.

 

처음 누르면 hide, 두 번째 누르면 show 가 된다. (완료 후 callback으로 alert을 발생한다.)

$(document).ready(function(){
  $("#button_toggle").click(function(){
    $("p").toggle(3000, function(){alert("The paragraph is now hidden")});
  });
});

 

 

3. hide-show , toggle 과 비슷한 효과

 

 

 

* animate

다양한 효과를 보면서 나타나거나 사라진다.

$(document).ready(function(){
  $("#button_ani").click(function(){
    $("h2").animate({width: '0%'},1000,'linear');
  });
});

 

animate에는 다양한 효과 연출방법과 연출 시간을 인자로 지정한다.

이와 관련되서는 추후 링크를 추가.