jQuery+CSS+HTML 공부.
'HeadFirst JQuery' 5장 이펙트와 애니메이션 예제를 응용하여 만들기.

1. 각 색상의 직사각형 버튼을 클릭시 해당 애니메이션이 실행된다.
.animate() 메서드를 이용한 여러가지 애니메이션 효과들 테스트.

14/8/19 화

오늘의 jQuery 공부 -Effect / Animation.

* 요소를 애니메이트 시킬 때는 CSS에서 position 속성을 absolute나 relative, fixed로 지정해 주어야 한다. static으로 둘 경우 top, right, left, bottom 속성을 지정할 수 없다.

* .hide() .show() .toggle() 메서드: CSS display 속성 변화
.hide(): display 속성을 none을 변경하여 안보이게 만듦.
.show(): 보이게 만듦.
.toggle(): 보이는 상태면 안보이는 상태로, 안보이는 상태면 보이는 상태로 변경.

* .fadeIn() .fadeOut() .fadeTo() 메서드: CSS opacity 속성 변화
.fadeIn(): opacity를 0에서 100으로 변경.
.fadeOut(): opacity를 100에서 0으로 변경.
.fadeTo(): opacity를 지정한 불투명도 퍼센트까지 변경.
ex) $("#id1").fadeOut(); //아이디가 id1인 요소를 0.4초(매개변수가 없으면 기본 시간인 normal이 적용)에 걸쳐 사라지게 함.

* .slideUp() .slideDown() .slideToggle() 메서드: CSS height 속성 변화
.slideUp(): 선택요소 높이를 0으로 변경한 뒤 display를 none으로 설정.
.slideDown(): 선택요소 높이를 0에서 CSS 스타일에 설정된 값으로 변경.
.slideToggle(): 현재 요소 높이가 원래 높이이면 slideUp()을, 0이면 slideDown()을 적용.

* animate(CSS 속성, 지속시간) 메서드: 숫자값을 사용 가능한 각종 CSS 속성들 변경.
사용가능한 속성들:
top, bottom, left, right, backgroundPosition,
height, minHeight, maxHeight, width, minWidth, maxWidth,
borders, margin, padding,
fontSize, letterSpacing, wordSpacing, textIndent, lineHeight
ex) $(this).animate({opacity: 0.3, height: 150, left: 300}, 5000); //이 요소의 불투명도를 0.3으로, 높이를 150으로, 가로 위치를 300으로 5초에 걸쳐 변경.
$(this).animate({opacity: "-=0.1"}, 500); //실행할 때마다 이 요소의 불투명도를 0.1씩 0.5초에 걸쳐 줄여간다.

* 애니메이션 끄기: $.fx.off = true; 또는 .stop() 메서드 이용.

* setTimeout(실행할 함수명, 대기시간): 타이머 메서드.
* setInterval(실행할 함수명, 대기시간): 반복처리 메서드.
setTimeout은 실행시 한번만 작동한다. 계속 작동하려면 재귀적으로 함수안에서 그 함수를 다시 호출하는 방법을 써야한다.
setInterval은 지정된 밀리 초 마다 반복적으로 함수를 호출한다.
ex) setInterval(loop, 1000); //1초 마다 loop() 함수 반복 실행.
function loops(){ 실행할 내용; setTimeout(loops, 1000); } //loops()함수를 한 번 호출하면 setTimeout 함수가 loops() 함수를 재귀 호출해 반복적으로 실행된다.
제거할 때는 각각 clearTimeout(), clearInterval() 메서드를 이용한다.

//jQuery 코드(간략화): 
$(document).ready(function(){ //브라우저가 준비되면
	var headClix=0, eyeClix=true, noseClix=true, mouthClix=true;

	$('#head').click(function(){
		if(headClix < 10){
			$(this).animate({opacity: "-= 0.1"}, 500); 
			headClix += 1;
		}else{
			$(this).css({opacity: 1});
			//$.fx.off = true; //애니메이션 효과 끄기.
			headClix = 0;
		}
	});
	$('#eyes').click(function(){
		if(eyeClix){
			$(this).animate({left: "100px", textIndent: 30}, 3000);
			$('#frame').animate({backgroundPosition: 32000}, 60000);
			eyeClix = false;
		}else{
			$(this).animate({left: "0px", textIndent: 0}, 3000);
			$('#frame').animate({backgroundPosition: 0}, 3000);
			eyeClix = true;
		}
	});
	$('#nose').click(function(){
		if(noseClix){
			$(this).animate({opacity: 0.5, height: 50, left: 300}, 5000); 
			noseClix = false;
		}else{
			$(this).animate({opacity: 1, height: 90, left: 0}, 5000); 
			noseClix = true;
		}
	});
	$('#mouth').click(function(){
		if(mouthClix){
			$(this).animate({borderWidth: 5, fontSize: 50, letterSpacing: 30}, 5000); 
			mouthClix = false;
		}else{
			$(this).animate({borderWidth: 1, fontSize: 12, letterSpacing: 0}, 5000); 
			mouthClix = true;
		}
	});
	lightningOn('#lightning1', 4000);
	lightningOn('#lightning2', 5000);
	lightningOn('#lightning3', 7000);
});
function lightningOn(element, t){
	$(element).fadeIn(250).fadeOut(250);
	setTimeout(function(){lightningOn(element, t)},t);
}