jQuery Forum

I am working on a website that has animations that change every week.  With that in mind, I found a need for an animation queue with the ability to set a time value for each event.  So here is what I came up with:

The plugin accepts, in its options, an array of events in this format:

[ [callback,[args],time],[callback,[args],time] ]

and so on. I have built it to have two time modes: Absolute and Relative.  Absolute will fire events based on the overall time elapsed for the object. (keep in mind, if an alert is shown in any callback methods, all triggers that were supposed to happen will happen immediately following the close of the alert) In relative, all events fire based on the time in which the previous event was fired.  Therefore, if a callback brings up an alert, the following event will not fire until its time specification after the alert is closed.

To make sure that we do not waste any time in loops for events that should trigger at the same time, the plugin creates a master list and uses additional setTimeout calls to call all methods for that time period at once.

Additional options include:

autoPlay: [true|false] does the eventlist start firing as soon as the init is finished.

2. // Drudeken Studios - actionList jQuery Plugin
3. // requires latest jQuery and jQuery UI Core
4. 
   
5. (function( $ ) {
6.   
7.   
8.     // Create some defaults, extending them with any options that were provided
9. var startTime = jQuery.now(),
10. elapsedCheckpoint = 0,
11. paused = false,
12. currentEventId = 0,
13. callback,
14. callbackList,
15. mode;
17. var methods = {
18. init : function( options ) { 
19. 
    
20. var settings = $.extend({
21. 'events' : [],
22. 'autoPlay' : true,
23. 'mode' : 'absolute'
24. }, options);
26. var $this = $(this),
27. data = $this.data('actionList')
28.  
29. if ( ! data ) {
30.   $(this).data('actionList', {
31.   events : settings.events
32.   });
33.  
34. }
35. mode = settings.mode;
36. logit(currentEventId);
37. createAbsoluteList(settings.events);
38. if(settings.autoPlay){
40. runNext(currentEventId);
41. }else{
42. paused = true;
43. }
44. return this;
45. },
46. start : function( ) {
47. if(paused){
48. startTime = jQuery.now();
49. paused = false;
50. runNext(currentEventId);
51. }
52. return this;
53. },
54. stop : function( ) { 
55. return this;
56. },
57. pause : function( content ) { 
58. stopEvents();
59. elapsedCheckpoint += jQuery.now() - startTime;
60. paused = true;
61. return this;
62. },
63. add : function (){
64. console.log(callbackList);
65. return this;
66. },
67. elapsedTime : function(){
68. console.log(currentEventId + " | " + elapsedTime());
69. return this;
70. }
71. }
74. $.fn.actionList = function( method ) {       
75. // Method calling logic
76. if ( methods[method] ) {
77.   return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
78. } else if ( typeof method === 'object' || ! method ) {
79.   return methods.init.apply( this, arguments );
80. } else {
81.   $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
82. }   
83.   };
84.   
85.   function createAbsoluteList(events){
86. var count = 0;
87. callbackList = [];
89. for(var i = 0; i < events.length ; i++){
90. var func = events[i][0];
91. var args = events[i][1];
92. var delay = events[i][2];
94. if(delay == 0 && !i==0){
95. callbackList[callbackList.length -1][1].push([func,args]);
96. }else{
97. callbackList.push([delay,new Array([func,args])]);
98. }
99. }
100.   }
101.   function elapsedTime(){
102.  if(paused){
103. return elapsedCheckpoint;
104. }else{
105. return elapsedCheckpoint + (jQuery.now() - startTime);
106. }
107.   }
108.   function runNext(id){
110.  var interval = callbackList[id][0] - elapsedTime();
111.  if(mode == "relative"){
112.  interval = callbackList[id][0];
113.  }
114.  if (interval < 0){ interval = 0; }
115.  logit("SETTIMEOUT: " + id + " | cur: " + elapsedTime() + " | call: " + callbackList[id][0] + " | int: " + interval);
116.  callback = setTimeout(execute,interval);
117.  
118.   }
119.   function execute(){
120.  var ids = [];
121.  for(var i = 0; i < callbackList[currentEventId][1].length; i++){
122. ids.push([currentEventId, i]);  
123.  }
124.  console.log(ids);
125.  for(var i = 0; i < callbackList[currentEventId][1].length; i++){
126.  logit("CALLIT: " + currentEventId + " | cur: " + elapsedTime() + " | call: " + callbackList[currentEventId][0] + " | id: " + i);
127.  //setTimeout(function(){ callIt(ids[i]); },0);
128.  exeTimeout(callbackList[currentEventId][1][i][0], callbackList[currentEventId][1][i][1]);
129.  }
130.  if(currentEventId + 1 < callbackList.length){
131.  runNext(currentEventId + 1);
132.  }
133.  currentEventId++;
134.   }
135.   function startNext(){
136.  runNext(currentEventId);
137.   }
138.   function stopEvents(){
139.  clearTimeout(callback);
140.   }
141.   function exeTimeout(func,args,time){
142. setTimeout(exe(func,args),time);  
143.   }
144.   function exe(func,args){
145. console.log(func);
146. console.log(args);
147. func.apply({},args);
148. }
149. function logit(message){
150. if(true){
151. console.log(message);
152. }
153. }
154. })( jQuery );

HTML Test page

2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>
6. <script type="text/javascript" src="jQuery/jquery-1.7.2.min.js"></script>
7.     <script type="text/javascript" src="jQuery/jQuery.actionlist.js"></script>
8.     <script type="text/javascript" src="jQuery/jquery-ui-1.8.21.custom.min.js"></script>
9. 
   
10.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
11.     
12.     <title>Drudeken Studios - jQuery ActionList Plugin</title>
13.     <style>
14.     
15.         #one, #two, #three{
16.             width: 25px;
17.             height: 25px;
18.         }
19.         #one{
20.             background: #ddd;
21.         }
22.         #two{
23.             background: #bbb;
24.         }
25.         #three{
26.             background: #999;
27.         }
28.         #container{
29.             background: black;
30.             width: 600px;
31.             height: 300px;
32.             position: relative;
33.             left: 50%;
34.             margin-left: -300px;
35.             vertical-align: bottom;
36.         }
37.     </style>
38. </head>
39. 
    
40. <body>
41. <div id="actionList"></div>
42.     
43.     <div id="container">
44.         <div id="one">One</div>
45.         <div id="two">Two</div>
46.         <div id="three">Three</div>
47.     </div>
49. <script type="text/javascript">
50. var one = "one";
51. var two = "two";
52. var three = "three";
54. $(document).ready(function(){
56. $('#actionList').actionList({
57. 'events' : [[ah,[one,100,500],0],
58.   [ah,[two,100,500],250],
59.   [ah,[three,100,500],250],
60.   [aw,[one,80,500],250],
61.   [aw,[two,80,500],0],
62.   [aw,[three,80,500],0],
63.   [ab,[one,'red',500],1000],
64.   [ab,[two,'blue',500],0],
65.   [ab,[three,'green',500],0],
66.   [ah,[one,98,0],1500],
67.   [ah,[two,98,0],0],
68.   [ah,[three,98,0],0],
69.   [acss,[one,'border','solid white 1px'],0],
70.   [acss,[two,'border','solid white 1px'],0],
71.   [acss,[three,'border','solid white 1px'],0],
72.   [ab,[one,'#eee',500],1000],
73.   [ab,[two,'#ddd',500],0],
74.   [ab,[three,'#ccc',500],0],
75.   [aw,[one,600,500],0],
76.   [aw,[two,600,500],0],
77.   [aw,[three,600,500],0],
78.   [acss,[one,'border',''],1500],
79.   [acss,[two,'border',''],0],
80.   [acss,[three,'border',''],0],
81.   [ah,[one,100,0],0],
82.   [ah,[two,100,0],0],
83.   [ah,[three,100,0],0]],
84. 'mode' : 'relative',
85. 'autoPlay' : true
86. });
87. });
89. function ah(id,height,time){
91. var h = height + "px";
93. $('#' + id).animate({
94. height: h,
95. easing: 'easeOutBounce'
96. }, time);
97. }
98. function aw(id,width,time){
99. var w = width + "px";
101. $('#' + id).animate({
102. width: w
103. }, time, 'linear');
104. }
106. function ab(id,color,time){
107. $('#' + id).animate({
108. backgroundColor : color,
109. }, time);
110. }
112. function acss(id,attr,value){
113. $('#' + id).css(attr,value);
114. }
115. </script>
116. </body>
117. 
     
118. </html>

I know the code is rough, I'm looking for ideas on how to improve it, and maybe clean it up a bit.  Also, is there something out there like this and if not, is this worth it?

Thank you all!