2020-08-07JavaScript6 minutes read (About 933 words) 0 visits

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

jquery.innerfade 라이브러리

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

라이브러리 사용방법

라이브러리 다운로드사이트의 하단에 있는 zip파일 클릭
라이브러리 다운로드 후 압축해제 후 jquery.innerfade.js파일 복사
프로젝트의 라이브러리 모음 폴더에 jquery.innerfade.js붙여넣기
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태그 클리시마다 속성값(가로,세로)을 변경 코드 구현

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

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

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

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

jquery.innerfade 라이브러리

라이브러리 사용방법

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

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

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

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

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

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

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

Comments

Catalogue

Categories

Recent

Archives

Tags

Advertisement