CORE
NATIVE
TABLE
MAKE
CUSTOMIZE
EFFECTS
VIRTUAL BOX
PLUG-IN
|
effects_cycle.js
Contains Class Fx.Cycle and its extensions, Class Element
Summary Fx.Cycle | | A wrapper which allows you to create powerful cycle effects | Element | | Contains the cycle method which returns a determinate Fx.Cycle instance |
Extends Fx.Morph
Constructor new Fx.Cycle.cycleType (element, options)
Properties element | | the wrapper which contains your slides | options | | optional. The Fx options plus those described below |
Options animeOut | | an object whose properties are the styles to alter when the slide gets out. | animeIn | | an object whose properties are the styles to alter when the slide comes in. | cssBefore | | an object whose properties are the styles to alter immediately before the slide comes in. | animeInType | | indicates the method to use with the animeIn object. It can be 'set' (default) or 'start' | overflow | | the overflow of the wrapper. Depends on the type of cycle effect. | steps | | the timer used by autostart to change periodically the slides. Default is 2000 ms | handles | | an object which attaches events to elements passed in as values. The keywords represent the Fx.Cycle's methods | autostart | | if true the slides will be changed automatically. Deafult is true | enable | | an object containing some keywords to enable extra features. See below. |
enable:
-
keyboard : if true you can navigate with the keyboard too. In addition to the arrows, you can use the following keys. 'a' for autostart, 's' for stop, 'f' to go to the first slide and 'l' to go to the last slide.
Events onAnimeIn | | function fired immediately before the element is animed in. The current and the next slide will be passed in | onAnimeOut | | function fired immediately before the element is animed out. The current and the next slide will be passed in |
Methods next | | switches to the next slide | prev | | switches to the previous slide | goTo | | swicthes to the given slide | toFirst | | switches to the first slide | toLast | | switches to the last slide | autostart | | enables the cycle slideshow | stop | | stops the slideshow either if start method has been called or autostart option has been enabled | animeIn | | sets the animeIn properties | animeOut | | sets the animeOut properties | cssBefore | | sets the cssBefore properties |
Note top method next
switches to the next slide
Example fx.next();
top method prev
switches to the previous slide
Example fx.prev();
top method goTo
swicthes to the given slide
Arguments num | | the position of the needed slide |
Example fx.goTo(2);
top method toFirst
switches to the first slide
Example fx.toFirst();
top method toLast
switches to the last slide
Example fx.toLast();
top method autostart
enables the cycle slideshow
Example fx.autostart();
top method stop
stops the slideshow either if start method has been called or autostart option has been enabled
Example fx.stop();
top method animeIn
sets the animeIn properties
Arguments styles | | an object which contains the animeIn css styles |
Example fx.animeIn({top: 200, left: 200});
top method animeOut
sets the animeOut properties
Arguments styles | | an object which contains the animeOut css styles |
Example fx.animeOut({top: -200, opacity: 0});
top method cssBefore
sets the cssBefore properties
Arguments styles | | an object which contains the cssBefore css styles |
Example fx.cssBefore({left: 200, opacity: 1, height: 0, width: 0});
Extends Fx.Morph,
top class Fx.Cycle.shuffle
Extends Fx.Cycle,
Extends Fx.Cycle,
top class Fx.Cycle.slideUp
Extends Fx.Cycle,
top class Fx.Cycle.slideDown
Extends Fx.Cycle,
top class Fx.Cycle.slideRight
Extends Fx.Cycle,
top class Fx.Cycle.slideLeft
Extends Fx.Cycle,
top class Fx.Cycle.foldUp
Extends Fx.Cycle,
top class Fx.Cycle.foldDown
Extends Fx.Cycle,
top class Fx.Cycle.foldRight
Extends Fx.Cycle,
top class Fx.Cycle.foldLeft
Extends Fx.Cycle,
Extends Fx.Cycle,
top class Fx.Cycle.diagonalUp
Extends Fx.Cycle,
top class Fx.Cycle.diagonalDown
Extends Fx.Cycle,
top class Fx.Cycle.linear
Extends Fx.Cycle,
Extends Class Element
Methods cycle | | returns an Fx.Cycle instance of the given type |
top method cycle
returns an Fx.Cycle instance of the given type
Arguments type | | the Fx.Cycle transition | options | | the Fx.Cycle options |
Example // slideUp instance
var slideUp = $('myElement').cycle('slideUp');
// diagonalUp instance
var diagonalUp = $('myElement').cycle('diagonalUp', {duration: 4000, steps: 4000});
Documentation By
Riccardo Degni -
powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the
Creative Commons BY-NC SA License
|