반응형
이번에는 JQuery에서 사용하는 애니메이션쪽의 일부분을 가져왔다.
예시
|
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
|
<!DOCTYPE html>
<html>
<head>
<style> span {
color:red;
cursor:pointer;
}
div {
margin:3px;
width:80px;
height:80px;
}
div {
background:#f00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" id="fadeout" value="fade out" />
<input type="button" id="fadein" value="fade in" />
<input type="button" id="hide" value="hide" />
<input type="button" id="show" value="show" />
<input type="button" id="slidedown" value="slide down" />
<input type="button" id="slideup" value="slide up" />
<input type="button" id="mix" value="mix" />
<div id="target">
target
</div>
<script>$('input[type="button"]').click( function(e) {
var $this = $(e.target);
switch($this.attr('id')) {
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn('slow');
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown('slow');
break;
case 'slideup':
$('#target').slideUp('slow');
break;
case 'mix':
$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
break;
}
})
</script>
</body>
</html>
|
cs |
1. fadeOut() : 점점 안보이게하기
2 fadeIn() : 점점 보이게 하기
3. hide(): 숨기기
4. show(): 보이기
5. slidedown(): 아래로 슬라이드 -> 없을때 아래로 표출시킬때
6. slideUp(): 위로 슬라이드 ->있을때 위로 없애버릴때
예제 2:
|
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
|
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">
» Run
</button>
<div id="block">
Hello!
</div>
<script>/* Using multiple unit types within one animation. */
$("#go").click( function() {
$("#block").animate({
width: "300px",
opacity: 0.4,
marginLeft: "50px",
fontSize: "30px",
borderWidth: "10px"
}, 3000);
});</script>
</body>
</html>
|
cs |
.animate() 를 사용하여 원본 -> 수정본 으로 애니메이션을 만들수있다.
반응형
'자바스크립트' 카테고리의 다른 글
| React App을 생성해보자. (0) | 2023.01.28 |
|---|---|
| React 개요 (0) | 2023.01.25 |
| jQuery 사용하기 (4) [탐색] (0) | 2022.12.15 |
| jQuery 사용하기 (3) [폼] (0) | 2022.12.11 |
| jQuery 사용하기 (2) [엘리먼트 제어] (0) | 2022.12.05 |