Intro to the CBE Slide Methods

General Slide Concepts

Here are the slide methods.

All the slide methods are time-based. The slide is completed within a certain time that you specify in milliseconds. The advantage is that your animations will execute at the same speed regardless of the browser or computer. On slower browsers and computers, there will be less animation frames. On faster browsers and computers, there will be more frames, so the animation will be smoother. But the animation will complete it's slide within the same time on either slow or fast browsers.

A slide can be stopped at any time by calling the method stopSlide().

Slide methods generate slideStart, slide, and slideEnd events. See this example.

See the object reference for complete details of each method, and for an explanation of the parameter syntax used here.

Top

Linear Sliding

The slideTo() method has two parameter variations. The first accepts pixel points, the second accepts cardinal points.

Sliding to Pixel Points

slideTo(iX, iY, uTime [, xEndListener])

Slide the top-left corner to a pixel point, within the given time, then evaluate the (optional) endListener.

Example 1 Slides E3 to the point (10,75) within 1.5 seconds, and slides E1 to the point (30,700) within 1 second.

e3.slideTo(10, 75, 1500);
e1.slideTo(30, 700, 1000);

slideBy(iDX, iDY, uTime [, xEndListener])

Slide the top-left corner to a pixel point relative to the current position, within the given time, then evaluate the (optional) endListener.

Example 2 Slides E3 to a point that is offset from it's current position by 30 in the X direction, and -30 in the Y direction. It takes .8 seconds to complete the slide. It also slides E1 to a point that is offset from it's current position by -300 in the X direction and 300 in the Y direction. It takes 2 seconds to complete the slide.

e3.slideBy(30, -30, 800);
e1.slideBy(-300, 300, 2000);

Sliding to Cardinal Points

slideTo(sCardinal, iMargin, uTime [, xEndListener ])

Slide the top-left corner to a cardinal point, with the given margin, within the given time, then evaluate the (optional) endListener. A cardinal point is one of the following strings: 'n', 'ne', 'e', 'se', 's', 'sw', w, 'nw', 'center'. That is, a corner, a side, or the center of the containing CrossBrowserElement object.

Example 3 Slides E3 to the center of it's container within 2 seconds. It slides E1 to the south-east corner (with a 10 pixel margin) of it's container within 1 second.

e3.slideTo('center', 0, 2000);
e1.slideTo('se', 10, 1000);

Top

Non-Linear Sliding

Ellipse

ellipse(uXRad, uYRad, iRadInc, uTime, iStartAngle, iStopAngle [, xEndListener])

Slide the element along an elliptical path. The y axis is opposite from the cartesian system, so sliding from 0 to 360 degrees is a clockwise slide. Sliding from 0 to -360 is a counter-clockwise slide. The center of the ellipse is determined by the radii and the start angle. Imagine that the element is initially sitting at iStartAngle.

Example 4 Slides E1 to the center, then in an elliptical figure eight.

  e1.sequence = new Array(
    "slideTo('center',0,500)",
    "ellipse(50,100,0,2000,90,450)",
    "ellipse(50,100,0,2000,-90,-450)",
    "stopSequence()"
  );

  e1.startSequence();

More ellipse() Examples.

Parametric Equation

parametricEquation(xX, xY, uTime [, xEndListener])

This is a time-based, parametric equation motion engine. I still need to experiment with this... but its fun to play with.

Example 5 Moves E3 and E2 to their centers, then slides E3 in an outward spiral. You can resize E2 while E3 is in motion and E3 keeps it's position relative to E2's size.

  e2.moveTo('center');
  e3.moveTo('center');
  e3.parametricEquation(
    ".3*t*Math.cos(t*30)",
    ".3*t*Math.sin(t*30)",
    0
  );

Stop Example 5

More parametricEquation() Examples.

Top

Corner Sliding

slideCornerTo(sCorner, iX, iY, uTime [, xEndListener])

This is a time-based resize - and you can specify which corner slides to the target point.

Example 6 Slides E2 to the north-east corner, then resizes by the south-west corner, then resizes by the north-west corner.

  e2.sequence = new Array(
    "slideTo('ne', 0, 500)",
    "slideCornerTo('sw', 0, e2.parentNode.scrollTop() + ph, 1000)",
    "slideCornerBy('nw', pw-150, ph-150, 1000)",
    "stopSequence()"
  );

  e2.startSequence();

slideCornerBy(sCorner, iDX, iDY, uTime [, xEndListener])

This is a time-based resize - and you can specify which corner slides to the target point, which is found be adding iDX and iDY to the current position.

Slide Sequences

CBE includes support for slide sequences. I've used them in some of the examples on this page. See this example for more.

E2:
draggable
resizeable