Fx.Slide

Here is the documentation for Fx.Slide.js.

The slide slides an element in horizontally or vertically, the contents will fold inside. Extends Fx, inherits all its properties.

Think of this like an old school cash register. When you punch the keys, the value slides into view. Currently the only two directions are sliding in from the top (like a window shade) and in from the left.

Options:

mode
set it to vertical or horizontal. Defaults to vertical.
and all the Fx options

Here's a box with a box in it that we'll slide around:

First, we have to create the slider object: (note that I've already executed this code for you).

var mySlider = new Fx.Slide('sliderButton', {duration: 500});

Then we can play with it:

mySlider.toggle() //toggle the slider up and down.
execute this code
mySlider.slideIn()
execute this code
mySlider.slideOut()
execute this code
mySlider.hide() //hides the element without a transition
execute this code
mySlider.show() //shows the element without a transition
execute this code

A Better Example

Here's how you might actually use it in the real world:

Show some stuff
I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me. I'm a bunch of text that toggles up and down when you click the text above me.

Note that there's an element shortcut for the "built-in" version of Fx.Slide:

$('slider2').addEvent('click', function(){
  $('slider2Content').slide('toggle');
});
execute this code

mootorial/08-plugins/00-fxplugins/00-fx.slide.txt · Last modified: 2008/10/27 23:53 by aaron-n