MooTools

How to use

Syntax

var myElSwap = new Fx.ElementSwap(elements[, options]);

Arguments

1. elements - (mixed) A collection of elements to add. Takes the same arguments as $$
2. options - (object, optional) An object with options. See ElementSwap for options and below for extra options.

Options

• TransitionFx - (object defaults to:{transition: 'linear',duration: 'long',onStart: function() {this.element.setStyle('overflow', 'hidden');},onComplete: function() {this.element.setStyle('overflow', 'auto');}}) see Fx.MorphElement for available options.
• showFx - (string: defauts to 'slide:right') the fx to use when showing the slide.
• hideFx - (string: defauts to 'slide:left') the fx to use when hiding the slide
• wait - (boolean: defauts to true) whether to wait to execute the endFx after the startFx or run them together.

Events

See ElementSwap for all available events.

Returns:

• (object) A new ElementSwap instance.

Example:

JavaScript

var elSwap = new ElementSwap('.div_swap');

CSS

#el1 {background-color:#f00;}
#el2 {background-color:#0f0;}
#el3 {background-color:#00f;}

.div_swap {
    position:absolute;
    top:0px;
    width:300px;
    height:300px;
    z-index:0;
    display:none;
}

.active { display:block; z-index:1;}

.elementSwap {
    position:relative;
    width:300px;
    height:300px;
    margin-left:auto;
    margin-right:auto;
    overflow:hidden;
}

HTML

<div id="el1" class="div_swap"><p>DIV 1</p></div>
<div id="el2" class="div_swap"><p>DIV 2</p></div>
<div id="el3" class="div_swap"><p>DIV 3</p></div>

Requirements

• MooTools Core 1.2.4: Class, Class.Extras, Element, Selectors, Fx.Morph, Fx.Transitions and their dependencies.
• ElementSwap and their dependencies
• Fx.MorphElement and their dependencies

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.