-
Notifications
You must be signed in to change notification settings - Fork 5
/
example1.html
97 lines (89 loc) · 2.75 KB
/
example1.html
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Basic Usage</title>
</head>
<body>
<div class="code-html">
<style type="text/css">
.html,body {color: #494949}
.context {width: 260px;}
.inlineblock {display:inline-block;vertical-align:middle}
.move-box-container {width:500px;height:18px;border:1px solid #9d9d9d;position:relative;border-radius:5px;overflow:hidden}
.move-box {width:18px;height:18px;background-color:#fa3282;position:absolute}
.move-btn-container {width:50px}
.move-btn {height:20px}
</style>
<div><button id="run-all" type="button">run all</button></div>
<!-- easeInOutQuad -->
<div id="easeInOut" class="context">
<h3>easeInOut</h3>
<div class="move-box-container inlineblock">
<div class="move-box"></div>
</div>
<div class="move-btn-container inlineblock">
<button class="move-btn" type="button">run</button>
</div>
</div>
<!-- easeInOutCubic -->
<div id="easeInOutCubic" class="context">
<h3>easeInOutCubic</h3>
<div class="move-box-container inlineblock">
<div class="move-box"></div>
</div>
<div class="move-btn-container inlineblock">
<button class="move-btn" type="button">run</button>
</div>
</div>
<!-- easeInOutQuart -->
<div id="easeInOutQuart" class="context">
<h3>easeInOutQuart</h3>
<div class="move-box-container inlineblock">
<div class="move-box"></div>
</div>
<div class="move-btn-container inlineblock">
<button class="move-btn" type="button">run</button>
</div>
</div>
<!-- easeInOutQuint -->
<div id="easeInOutQuint" class="context">
<h3>easeInOutQuint</h3>
<div class="move-box-container inlineblock">
<div class="move-box"></div>
</div>
<div class="move-btn-container inlineblock">
<button class="move-btn" type="button">run</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://rawgit.com/nhnent/tui.code-snippet/1.2.2/code-snippet.min.js"></script>
<script src="../dist/tui-component-animation.min.js"></script>
<script class="code-js">
function run(container) {
container = $(container);
var easing = container.attr('id');
var box = container.find('.move-box');
tui.component.animation.anim({
easing: easing,
from: 0,
to: 482,
duration: 2000,
frame: function(left) {
box.css({left: left + 'px'});
}
}).run();
}
$('button.move-btn').on('click', function(ev) {
var container = $(ev.target).closest('div.context');
run(container);
});
$('button#run-all').on('click', function() {
$('div.context').each(function(index, element) {
run(element);
});
});
</script>
</body>
</html>