JQUERY/함수

[jQuery] hide, show예제

nineDeveloper 2014. 9. 5. 16:32
728x90
반응형

style의 display속성을 단순히 none <-> block 것만이 아닌 애니메이션 효과를 주면서 변경되는 함수이다.

 

 

  1. $(function(){
  2.                 //slow, normal, fast
  3.                 $("button#1").click(function(){
  4.                     $("div").css("display", "none");
  5.                     $("div").show("slow");
  6.                 });
  7.  
  8.                 //times millisecond
  9.                 $("button#2").click(function(){
  10.                     $("div").css("display", "none");
  11.                     $("div").show(1000);
  12.                 });
  13.  
  14.                 //callback func
  15.                 $("button#3").click(function(){
  16.                     $("div").css("display", "none");
  17.                     $("div").show(1000, function(){
  18.                         $(this).css("background", "blue");
  19.                     });
  20.                 });    
  21.                
  22.                 $("button#4").click(function(){
  23.                     $("div").hide("slow");
  24.                 });
  25.                
  26.                 $("button#5").click(function(){
  27.                     $("div:not(:animated)").hide("slow");
  28.                 });
  29.             });

style부분

 

  1. <style type="text/css">
  2.         div{
  3.             width:300px;
  4.             height:300px;
  5.             background:red;
  6.             display:none;
  7.         }
  8.         </style>

 

html부분

 


  3.         <button id="1">show1</button>
  4.         <button id="2">show2</button>
  5.         <button id="3">show3</button>
  6.        
  7.         <button id="4">hide1</button>
  8.         <button id="5">hide2</button>
  9.        
  10.         <div></div>
  11.     </body>

실행하면 아래와 같이 나타난다. 

 

 

 

 

show버튼을 누르면 div가 커지면서 나타나고 hide버튼을 작아지면서 사라진다.

 

눈여겨 볼 함수는 $("div:not(:animated)").hide("slow");​ 이다.

작아지거나 커지는 등의 애니메이션 중이 아닐때에만 hide 명령이 들어가게 하는 셀렉터임을 명심! 

책에서는 div:  not(:  animated).hide("slow") 이렇게 써 있어서 그대로 따라 쳤는데 안되서 샘플 소스를 보니 띄어쓰기를 하면 안되는 거였다...

 

 show와 hide만 반복해서 사용할 경우에는

 

//! show <-> hide 

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

$("div:not(:animated)").toggle("slow");

}); 

 

 

와 같이 toggle 함수 하나로도 합칠 수 있다. 해당 셀렉터가 show 중일 때에는 hide 역할을 hide중에는 show역할을 수행한다. 

show, hide 함수와 사용법은 같아서 millesecond, 또는 slow 와 같은 매개변수  또는 callback 함수를 인자로 사용할 수 있다.

 

[출처] [jQuery] hide, show예제|작성자 보리


728x90
반응형
저작자표시 (새창열림)