반응형
jquery에서 지원하는 간단한 시각 효과 첫 번째는 toggle 메소드를 이용한 show 메소드와 hide 메소드의 실행입니다.
show 메소드는 문서 객체를 보여주는것이고 hide 메소드는 문서 객체는 사라지게 하는 것입니다.
실행화면을 보시면 쉽게 이해가 됩니다.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (event){
//이벤트를 연결합니다.
$('button').click(function (){
//간단한 효과를 적용합니다.
$('.page').toggle('slow');
});
});
</script>
</head>
<body>
<button>Toggle show</button>
<div class="page">
<h1>lorem issumdolorsit</h1>
<p>lorem issumdlskjfalsdkjfa;lk</p>
</div>
</body>
</html>
출력화면
클릭시 아래 화면이
다음과 같이 없어집니다.
반응형
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
|---|---|
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |
| jquery - delegate 방법을 사용한 이벤트 연결 범위 한정 (0) | 2014.10.11 |