-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathexample-1.html
57 lines (50 loc) · 1.6 KB
/
example-1.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
<!doctype>
<html>
<head>
<title>Easing Select Example</title>
<style>
.square { height: 200px; width: 200px; position: absolute; border: 1px solid #333; top: 20px; left: 10px; background: #ccc; }
.square-2 { top: 250px; }
</style>
</head>
<body>
<div class="square square-1"></div>
<div class="square square-2"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script src="jquery.easing-select.js"></script>
<script>
$(function() {
// EXAMPLE 1 - adjusts the left position of the square
var $square = $(".square-1"),
SELECT_ID = "position-easing-type";
// Adds the easing select to the div, on change it will animate
// with the specified easing equation
$square.easingSelect(SELECT_ID, function() {
var easingValue = $("#" + SELECT_ID).val(),
animateDuration = 1000;
$square.stop().animate({
left: 500
}, animateDuration, easingValue).animate({
left: 10
}, animateDuration, easingValue);
});
// EXAMPLE 2 - adjusts the size of the square
var $square2 = $(".square-2");
SELECT_ID = "size-easing-type";
// Adds the easing select to the form with #easing-type
$square2.easingSelect(SELECT_ID, function() {
var easingValue = $("#" + SELECT_ID).val(),
animateDuration = 1000;
$square2.stop().animate({
width: 300,
height: 300
}, animateDuration, easingValue).animate({
width: 200,
height: 200
}, animateDuration, easingValue);
});
});
</script>
</body>
</html>