Bug Tracker

Ticket #127: easing.html

File easing.html, 1.7 KB (added by choan.galvez@…, 14 years ago)

HTML test

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
4<head>
5
6<meta http-equiv="content-type" content="text/html; charset=utf-8" />
7<title>Untitled</title>
8<script type="text/javascript" src="jquery-fx-easing.js"></script>
9
10
11<script type="text/javascript">
12// start here
13$(init);
14
15function init() {
16  $('#mine')
17    .animate( { left: 600, top: 100 }, 2000, { easing: easeInOutSine, step: logPos } )
18    .animate( { left: 300, top: 300, width: 300, height: 50 }, 2000, { easing: easeInCubic, step: logPos } )
19    .animate({ top: 100, left: 200, height: 300, width: 50 }, 2000,  {easing: easeInOutQuad, step: logPos } )
20    .animate( { left: 0, top: 0 }, 2000, { easing: easeInOutSine, step: logPos, complete: completed } );
21}
22
23function completed() {
24  document.title = 'Complete!';
25}
26
27function logPos() {
28  document.title = [ this.style.top, this.style.left ].join(', ');
29}
30
31
32// next three functions are taken from
33// http://www.robertpenner.com/easing/
34function easeInOutSine(t, b, c, d) {
35        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
36};
37
38function easeInCubic(t, b, c, d) {
39  return c * Math.pow(t/d, 3) + b;
40}
41
42function easeInOutQuad(t, b, c, d) {
43        if ((t/=d/2) < 1) return c/2*t*t + b;
44        return -c/2 * ((--t)*(t-2) - 1) + b;
45}
46
47
48</script>
49<style type="text/css">
50body {
51margin: 0;
52padding: 0;
53}
54
55#mine {
56  background: blue;
57  position: absolute;
58  width: 100px;
59  height: 100px;
60  top: 0;
61  left: 0;
62}
63
64
65</style>
66
67</head>
68
69<body>
70
71<div id="mine" style="left: 0">dfd</div>
72
73</body>
74</html>