Cross-Browser.com

xAniLine(xa, x, y, tt[, at[, qc[, oed[, oea[, oef]]]]]);

• xa - An xAnimation object. xa.e is assumed to be initialized to an Element object.
• x,y - The target coordinate.
• tt - Total time to move from current position to target.
• at - Acceleration type: 1=linear, 2=sine(fast start, slow at end), 3=cosine(slow start, fast at end).
• qc - Cycles. Not valid for linear accel. Two cycles will take the element to the target and back to the start position.
• oed - onEnd delay. A delay (ms) before onEnd is called. If oed > 0 then no arguments are passed to onEnd.
• oea - onEnd argument. It will be passed to onEnd.
• oef - onEnd function. A function reference or a string. It will be called (or evaluated) at the completion of the animation. If it is a function it will receive two arguments: oef(xa, oea). If onEnd returns (or evaluates to) true then the animation will repeat.

xAniLine returns xa.

Click a button to cause the corresponding method to be called for each xAnimation object.

pauseresumekill

This code starts the animations in this DIV, and updates them on window resize.

xAniLine(xa[0], x + cw, y + ch, tt, 1, 1, 0, null, 'true');
xAniLine(xa[1], x + cw, y, tt, 1, 1, 0, null, 'true');
onEndTest(xa[2], OEA[0]);

This code starts the animations in this DIV, and updates them on window resize.

xAniLine(xa[3], x + cw, y + ch, tt, 2, 2, 0, null, 'true');
xAniLine(xa[4], x + cw, y, tt, 2, 2, 0, null, 'true');
OEA[1].at = 2;
onEndTest(xa[5], OEA[1]);

This code starts the animations in this DIV, and updates them on window resize.

xAniLine(xa[6], x + cw, y + ch, tt, 3, 2, 0, null, 'true');
xAniLine(xa[7], x + cw, y, tt, 3, 2, 0, null, 'true');
OEA[2].at = 3;
onEndTest(xa[8], OEA[2]);

Each of the above demos call onEndTest() which causes an element to travel around the border of the DIV.

function onEndTest(xa, xd)
{
  xAniLine(xa, xd.x + xd.cw, xd.y + xd.ch, xd.tt, xd.at, xd.qc, 0, xd, /* from sw to se */
    function(a,d) {
      xAniLine(a, d.x + d.cw, d.y, d.tt/2, d.at, d.qc, 0, d,           /* from se to ne */
        function(a,d) {
          xAniLine(a, d.x, d.y, d.tt, d.at, d.qc, 0, d,                /* from ne to nw */
            function(a,d) {
              xAniLine(a, d.x, d.y + d.ch, d.tt/2, d.at, d.qc, 0, d,   /* from nw to sw */
                function(a,d) {
                  onEndTest(a,d);
                }
              );
            }
          );
        }
      );
    }
  );
}