[jQuery] innerfade 라이브러리, animate(속성, 속도, 콜백함수)

💡 핵심 요약 (TL;DR)

innerfade 라이브러리, animate(속성, 속도, 콜백함수)의 동작 원리를 이해하고 실제 프로젝트에 적용하기 위한 실무 가이드다. * 이때 marginRight는 사용하지 않고 marginLeft만 사용함을 적용할 수 있다.

jquery.innerfade 라이브러리

• 화면전환효과를 나타내는 라이브러리이다.
• 어떠한 효과들이 있는지는 참고링크 : jquery.innerfade에서 확인가능.

라이브러리 사용방법

1. 라이브러리 다운로드사이트의 하단에 있는 zip파일 클릭
2. 라이브러리 다운로드 후 압축해제 후 jquery.innerfade.js파일 복사
3. 프로젝트의 라이브러리 모음 폴더에 jquery.innerfade.js붙여넣기
4. script태그로 jsp페이지에 연결하기

예시 : li가 0.75초마다 다음 li로 바뀌는 화면전화 효과

<script>
<!-- 컴퓨터에 있는 제이쿼리 라이브러리 추가  -->
<script src="../js/jquery-3.5.1.min.js"></script>
<!-- innerfade 라이브러리(플러그인 추가) -->
<script src="../js/jquery.innerfade.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
    	$("#news").innerfade({
    		animationtype: "fade",
    		speed:750    		
    	});
    });
</script>

</head>
<body>
     <ul id="news"> 
       <li>content 1</li>
       <li>content 2</li>
       <li>content 3</li>
     </ul>
</body>

animate(속성, 속도, 콜백함수) 함수

예시 1번 : div태그 클리시마다 속성값(가로,세로)을 변경 코드 구현

1. css로 변경하고자하는 속성값 변수에 저장
2. css로 속성값 변화주기 (이때 parseInt로 형변환)
3. animate() 함수 적용

예시 2번 : 페이지 실행시 h태그가 왼쪽으로 이동하는 코드 구현

1. animate()로 왼쪽 margin값 증가시키면 됨

예시 3번 : h태그가 왼쪽으로 갔다고 원래 자리로 다시 돌아오는 코드 구현

• animate()로 왼쪽 margin값 증가시켰다가 감소시키면 됨
• 이때 marginRight는 사용하지 않고 marginLeft만 사용함
• 내코드 : 콜백함수에 원래 위치로 돌아오는 animate()함수적용
• 강사님코드 : 체이닝기법을 사용해서 animat()함수적용. 체이닝기법사용시 왔다리갔다리도 표현 가능.

예시 4번 : 에니메이션 정지 코드 구현

• stop()은 animate한 개를 멈추게 한다
• 아래 예시의 h4의 경우 animate가 4번 걸려있으므로 4번 stop을 눌러야 멈춘다
• clearQueue()는 큐자료구조의 큐와 동일. 에니메이션 큐에 있는 모든 동작 제거.
• finish()는 효과를 모두 처리하지않고 가장 마지막 결과만 보여줌

예시 5번 : 딜레이시켰다가 animate()실행

• delay()사용

<!-- 컴퓨터에 있는 제이쿼리 라이브러리 추가  -->
<script src="../js/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
//div태그 클리시마다 속성값(가로,세로)을 변경시키기
$(document).ready(function(){
	$('div').click(function(){
		//1-1.가로세로크기를 알아야 변경가능. 가로세로길이 출력
		let w = $(this).css('width');
		let h = $(this).css('height');
		//alert(" w : " + w+", h : "+h);
		
		//1-2.기존의 크기보다 20px 증가
		//변수값이 number타입이 아니라서 덧셈연산이 원하는대로 되지않는다
		//parseInt로 형변환하면 원하는 기능 구현
		//$('div').css('width', parseInt(w)+20);
		//$('div').css('height', parseInt(w)+20);
		
		//1-3.animate(속성, 속도, 콜백함수) 
		//클릭시마다 20px씩 늘어나긴 하는데 뚝뚝 끊긴다 -> 부드럽게 처리하는 걸 animate라고한다
		$(this).animate({
			width: parseInt(w)+20,
			height: parseInt(h)+20,
		},'slow')
		
		//2.페이지 실행시 태그 이동(왼쪽 margin값 증가)
		$('h2').animate({marginLeft: "200px"}, 2000,
				//function(){ alert("이동 완료");}
		);
		$('h3').animate({
			marginLeft:"200px",
			width : "100px"
		}, 2000);
		
		//3.h4 요소가 오른쪽으로 이동했다가 왼쪽으로 이동 구현
		//내코드
 		$('h4').animate({marginLeft:"300px"},2000, function(){
			$('h4').animate({marginLeft:"0px"},2000)
		}); 
		//강사님코드 : 체이닝기법사용
		$('h4').animate({marginLeft: "200px" },2000)
		       .animate({marginLeft: "0px" },1000)
		       .animate({marginLeft: "100px" },1000)
		       .animate({marginLeft: "0px" },1000);
		
		//4. 정지버튼 클릭시 애니메이션 정지
		//stop() vs clearQueue() vs finish()
		$('#btn').click(function(){
			$('h2').stop();
			$('h3').stop();
			$('h4').stop();
			$('h4').clearQueue();
			$('h4').finish();
		});
		
		//5.h3태그 왼쪽여백 150px 지정,가로길이 100px,5초
		// + 1초 기다렸다가 실행
		$('h3').delay(1000).animate({
			marginLeft: "150px",
			width: "100px"
		},4000);
		
		
	})//click()닫음
});
</script>

</head>
<body>

<div>시작</div>

<h2>내용1</h2>
<h3>내용2</h3>
<h4>내용3</h4>
<input type="button" value="정지" id="btn">

</body>

#ITWILL(JAVA)jQuery