style의 display속성을 단순히 none <-> block 것만이 아닌 애니메이션 효과를 주면서 변경되는 함수이다.
- $(function(){
- //slow, normal, fast
- });
- //times millisecond
- });
- //callback func
- });
- });
- });
- });
- });
style부분
html부분
실행하면 아래와 같이 나타난다.
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예제|작성자 보리
'JQUERY > 함수' 카테고리의 다른 글
| jQuery - name으로 접근하기 (0) | 2014.10.15 |
|---|---|
| 간편 ajax 통신 - jQuery.getJSON() (0) | 2014.10.15 |
| jquery 자식 노드 전부 삭제 (0) | 2014.09.11 |
| [jQuery] jQuery ajax form 값 전부 넘기기 (serialize 사용) (0) | 2014.09.05 |
| [jQuery]change() 이벤트 (0) | 2014.09.05 |
| jQuery 롤오버 (0) | 2014.08.19 |
| Ajax 연동시 history 문제(뒤로가기) (0) | 2014.08.19 |
| 선택된 <select> (0) | 2014.08.19 |
nineDeveloper
안녕하세요 현직 개발자 입니다 ~ 빠르게 변화하는 세상에 뒤쳐지지 않도록 우리모두 열심히 공부합시다 ~! 개발공부는 넘나 재미있는 것~!