얼마전 알게된 jQuery의 쉽고 편한 HTML DOM(Document Object Model) 조작은 매력적이어서 관심이 생겼었다.
이번엔 'Head First jQuery' 를 보는 중.
1장의 CSS Selector로 DOM을 선택, 클릭시 페이드 효과, 슬라이드 효과 주기 예제를 따라해 보다.

14/8/13 수

아래 박스를 누르면 그림이 밑으로 슬라이드 되며 서서히 나타나고 다시 누르면 다시 들어간다.

CSS에서 그림을 미리 감춰둔 뒤(img{display: none;}) jQuery코드를 이용해 CSS Selector로 선택, 마우스 클릭시 효과를 주는 함수(fadeIn(), slideToggle("slow"))를 실행되도록 한 것.

//jQuery 코드: 
var close = true; //슬라이드 개폐여부 확인용
$(document).ready(function(){ //브라우저가 준비되면
	$("#clickA").click(function(){ //버튼을 마우스로 클릭시
		if(close){
			$("img").fadeIn(3000); //그림이 3초동안 페이드인
			close = false;
		}else{
			$("img").fadeOut(1000);
			close = true;
		}
		$("#image1").slideToggle("slow");
		//그림을 담은 div 슬라이드 토글
	});
});