frames/frames.html at master · adamjmcintyre/frames · GitHub

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
	</head>
	<body>
	    <div id="whatsgoingon"></div>
	    <div id="red" style="background:red;width:20px;height:20px;position:absolute;left:10px;top:30px;"></div>
	    <div id="blue" style="background:blue;width:20px;height:20px;position:absolute;left:50px;top:30px;"></div>
        <script type="text/javascript">
            (function($){
                $.fn.frames = function(frames,props){
                    var fps = 60;    // Base things on 60 frames per second
                    var fps_interval = 1000 / fps;    // How often do we call our timeout in ms?

                    var anim = function(el,prop,delta,intvl){
                        var domEl = el[0];
                        var val = parseFloat(domEl.style[prop]);
                        var currentFrame = el.data('frame' + prop);

                        if(currentFrame == frames){
                            clearInterval(intvl);
                            return true;
                        }
                        else{
                            domEl.style[prop] = val + delta + 'px';
                            el.data('frame'+ prop, ++currentFrame);
                        }
                    }

                    var getAnim = function(el,prop,delta,itr,intvl){
                        return function(){
                            anim(el,prop,delta,itr);
                        }
                    }

                    this.each(function(){
                        var self = $(this);

                        for(var i in props){
                            var p = props[i];
                            var delta = (p - parseInt(self.css(i))) / frames;    // change in value per frame
                            var intvl;

                            self.data('frame' + i,0);

                            var a = getAnim(self,i,delta,intvl);
                            intvl = setInterval(a,fps_interval);
                        }
                    });

                    return this;
                }
            }(jQuery));
        </script>

        <button id="runit">Run animations</button>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#runit').click(function(){
                    $('#whatsgoingon').append('<span>Red - to top:150, height:500, width:250 in 500 frames</span><br/><span>Blue - to top:450, height:250, width:250 in 1000 frames</span>');
                    $('#red').frames(500, {top : 150, height : 500, width : 250 });
                    $('#blue').frames(1000, { top: 450, height : 250, width : 250 });
                });
            });
        </script>
	</body>
</html>