Cross-Browser.com

xSequence is an experiment with time and event based sequences. The event based feature is a result of adding onslideend support to all the X animation functions (this is the only event supported for now).

The current technique has an advantage in that it does not call eval - but this creates a disadvantage in that values in the action array are resolved when the array is initialized, not when the action is executed.

The current technique has another disadvantage in that function.apply requires JavaScript 1.3 (IE 5.5+). Currently this demo is working for me on WinXP with Opera 8.0, Firefox 1.0.2 and IE 6.0.

It makes extensive use of closure - do I need an onUnload listener for IE? Does it have circular refs?

Run Sequence 1 | Stop Sequence 1

window.onload = function()
{
  var w = 200, h = 200, sl_time = 1000;
  var cw = xClientWidth(), ch = xClientHeight();
  var d1 = document.getElementById('d1');

/*
  A Sequence is an array of Action arrays.

  seq[0]       = first action
  seq[i][0]    = time to next action, or if -1 then wait for onslideend
  seq[i][1]    = function ref
  seq[i][2]    = array of args
  seq[i][2][0] = first arg
*/

  xs1 = new xSequence([
    [0, xMoveTo, [d1, -w, -h]], // executes immediately
    [0, xResizeTo, [d1, w, h]],
    [0, xShow, [d1]],
    [-1, xSlideTo, [d1, (cw-w)/2, (ch-h)/2, sl_time]],
    [-1, xEllipse, [d1, (cw-w)/4, (ch-h)/4, 0, 1000, 0, 360]],
    [-1, xSlideCornerTo, [d1, 'sw', (cw-w)/2, ch, sl_time/2]],
    [-1, xSlideCornerTo, [d1, 'nw', (cw-w)/2, 0, sl_time/2]],
    [-1, xSlideTo, [d1, 0, 0, sl_time]], // calls xSlideTo then waits for onslideend
    [2500, msg, [d1, 'Waiting for 5 seconds...']], // calls msg then pauses for 2.5 secs
    [2500, null, null], // pauses for 2.5 secs (a test for no fn and no args)
    [0, msg, [d1, '']],
    [-1, xSlideCornerTo, [d1, 'ne', cw, ch-h, sl_time]],
    [-1, xSlideTo, [d1, 0, 0, sl_time]],
    [-1, xSlideCornerTo, [d1, 'sw', cw-w, ch, sl_time]],
    [-1, xSlideTo, [d1, 0, 0, sl_time]],
    [-1, xSlideCornerTo, [d1, 'se', (cw-w)/2+w, (ch-h)/2+h, sl_time]],
    [-1, xSlideCornerTo, [d1, 'nw', (cw-w)/2, (ch-h)/2, sl_time]],
    [-1, xEllipse, [d1, (cw-w)/4, (ch-h)/4, 0, 1000, 180, 540]],
    [-1, xSlideCornerTo, [d1, 'nw', (cw-w)/2, 0, sl_time/2]],
    [-1, xSlideCornerTo, [d1, 'nw', (cw-w)/2, (ch-h)/2, sl_time/2]],
    [1500, msg, [d1, 'Woo Hoo!']],
    [0, msg, [d1, '']],
    [-1, xSlideTo, [d1, -w, -h, sl_time]],
    [2500, null, null]
  ]);
}

function msg(e, s)
{
  e.innerHTML = '<p>' + s + '</p>';
}

View xSequence