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

jquery.innerfade 라이브러리




라이브러리 사용방법

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




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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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()사용
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!-- 컴퓨터에 있는 제이쿼리 라이브러리 추가  -->
<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>