Fx.ElementSwap 1.0.2

Fx.ElementSwap is a Slide Show class that will swap between any element using Fx.MorphElement to create the slide show effects.

Inherits methods, properties, options and events from ElementSwap.

Extends



Details

Author
Shaun Freeman
Current version
1.0.2
GitHub
vincentbluff/Fx.ElementSwap
Downloads
5657
Category
Effects
Tags
Report
GitHub Issues

Releases


Dependencies

  • fx_morphelement/1.0.3:
    • Fx.MorphElement
    • Fx.MorphElement.Effects
  • elementswap/1.0.1: ElementSwap

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


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.

blog comments powered by Disqus