이번 장에서는 효과에 대해서 알아보자.
효과란 어떤 태그에 대해 상태의 변경을 화면상으로 보여주는 것들을 말한다.
대표적인 효과는 보임(show)과 숨김(hide)이 있다.
syntax> show/hide
$(셀렉터).show(속도, 콜백함수);
$(셀렉터).hide(속도, 콜백함수);
$(셀렉터).show(); // 옳바른 구문
$(셀렉터).show(속도); // 옳바른 구문
$(셀렉터).show(속도, 콜백함수); // 옳바른 구문
$(셀렉터).show(콜백함수); // 잘못된 구문
위와 같이 파라미터를 원하는대로 사용할 수 있으나 앞의 파라미터를 제외하고 뒤에 파라미터를 사용할 수는 없다
속도는 1/1000초의 숫자 또는 'fast', 'slow' , 'normal' 의 문자열이 가능하다.
이렇게 제이쿼리는 매우 간단한 방법으로 해당 태그를 숨기고 보여줄 수가 있다.
* 소스 예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery effect</title>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function(){
$("#clickBtn").click(function(){
$(".divLabel").hide();
});
});
</script>
</head>
<body>
<input type="button" id="clickBtn" value="버튼" />
<div class="divLabel">
라벨~
</div>
</body>
</html>
소스를 보다시피 매우 간단하다. 셀렉터를 선택 후 show() 또는 hide() 호출만으로 보이고 숨김을 할 수가 있다.
단 보임과 숨김은 보통 쌍으로 이루어진다.
hide 상태 -> 보임버튼 클릭 -> show 상태
show 상태 -> 숨김버튼 클릭 -> hide 상태
이런 식으로 말이다.
이런 기능을 위해 제이쿼리에서는 toggle 이라는 function 을 제공해 준다.
syntax> toggle
$(셀렉터).toggle();
위와 같이 toggle 호출 한번만으로 hide/show 의 상태 변경이 자동으로 이루어 진다.(toggle 의 경우 스위치형태로 function 을 호출하도록 사용할 수도 있다)
아래는 toggle 로 구현된 예시이다.
테스트 예시
show/hide 에 대한 예시 화면
이상~
'IT > jquery' 카테고리의 다른 글
| jQuery 플러그인 화면 도시여부 체크 (0) | 2016.01.20 |
|---|---|
| [제이쿼리(jQuery)] lesson 6 (0) | 2014.12.16 |
| [제이쿼리(jQuery)] lesson 4 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 3 (0) | 2014.11.24 |
| [제이쿼리(jQuery)] lesson 2 (0) | 2014.11.24 |