728x90
반응형

이번 장에서는 hide(), show(), toggle()에 대한 기능을 알아보겠습니다. 이미 앞장부터 보셨다면 이미 hide() 기능을 알고 계실거라 생각됩니다.

 

hide()

hide() 기능은 문구를 숨기는 기능을 합니다.

 

show()

show() 기능은 문구를 보여주는 기능을 합니다.

 

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

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

 

관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});

</script>
</head>
<body>
<p>버튼을 차례차례 클릭해보시기 바랍니다.</p>
<button id="hide">숨겨라</button>
<button id="show">보여줘라</button>
</body>
</html> 

// 버튼의 id값 hide를 클릭하면 문구가 없어지는 현상이 나타남 

// 버튼의 id값 show를 클릭하면 문구가 나타나는 현상이 나타남

 

// "보여줘라" 버튼을 클릭하면 글씨가 나타나며

// "숨겨라" 버튼을 클릭하면 글씨가 없어짐

 

hide() 와 show() 에 좀더 기능을 추가하면 더 멋진 효과를 볼 수 있습니다.

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

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

// 조금 틀려진 점은 "()" 안에 숫자가 들어가 있는것을 확인 할 수 있습니다.

// 1000은 1초를 의미하며, 1초 동안 사라지고, 보여지는 현상이 나타납니다.

 

관련예제 

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(1000);
  });
  $("#show").click(function(){
    $("p").show(1000);
  });
});

</script>
</head>
<body>
<button id="hide">숨겨라</button>
<button id="show">보여줘라</button>
<p>첫번째 문장입니다.</p>
<p>두 번째 문장입니다..</p>
</body>
</html> 

// 위 내용은 이미지 보다는 직접 코딩을 해서 어떤현상이 나타나는지 확인 하시기 바랍니다.

// 그리고 숫자를 1000, 2000 바꿔가며 해보시고 나름대로 코딩도 수정하여 해보시기 바랍니다.  ^^

 

toggle()

toggle() 은 어떤 내용 또는 요소를 숨기고, 나타내는 기능을 동시에 수행 합니다. 즉, hide(), show() 기능을 하나로 묶어놓은 함수입니다.

 

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

 

관련예제

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

</script>
</head>
<body>

<button>Toggle</button>
<p>첫번째 문구 입니다.</p>
<p>두 번째 문구입니다.</p>
</body>
</html> 

 


 
 

// "Toggle" 버튼을 차례차례 클릭한 모습입니다.

 

toggle() 함수도 마찬가지로 괄호() 안에 숫자(1000) 등을 넣어 애니메이션 효과를 줄수 있습니다. 그리고 함수 "slow" , "fast" 등을 넣어 또 다른 애니메이션 효과도 가능합니다.

$(selector).toggle(1000); 

$(selector).toggle("slow");

$(selector).toggle("fast");

 

728x90
반응형
블로그 이미지

nineDeveloper

안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!

,