effects_cycles.js
Contains Class Fx.Cycles and its extensions, Class Element
Summary Fx.Cycles | | A wrapper which allows you to create powerful cycle effects | Element | | Contains the cycles method which returns a determinate Fx.Cycles instance |
Extends Fx.Elements
Constructor new Fx.Cycles.cycleType (element, options)
Properties element | | the wrapper which contains your slides | options | | optional. The Fx options |
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. | cssAfter | | an object whose properties are the styles to alter immediately after the slide has come in. | reset | | an object whose properties are the styles to reset to the next slide. | 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.Cycles'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 | cssAfter | | sets the cssAfter properties | reset | | sets the reset 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});
top method cssAfter
sets the cssAfter properties
Arguments styles | | an object which contains the cssAfter css styles |
Example fx.cssAfter({left: 0, opacity: 0, height: 200});
top method reset
sets the reset properties
Arguments styles | | an object which contains the reset css styles |
Example fx.reset({top: 200, opacity: 1, width: 0});
Extends Fx.Elements,
top class Fx.Cycles.scrollUp
Extends Fx.Cycles,
top class Fx.Cycles.scrollDown
Extends Fx.Cycles,
top class Fx.Cycles.scrollLeft
Extends Fx.Cycles,
top class Fx.Cycles.scrollRight
Extends Fx.Cycles,
top class Fx.Cycles.fadeZoom
Extends Fx.Cycles,
top class Fx.Cycles.turnDown
Extends Fx.Cycles,
top class Fx.Cycles.turnUp
Extends Fx.Cycles,
top class Fx.Cycles.turnLeft
Extends Fx.Cycles,
top class Fx.Cycles.turnRight
Extends Fx.Cycles,
top class Fx.Cycles.inOutLeft
Extends Fx.Cycles,
top class Fx.Cycles.inOutRight
Extends Fx.Cycles,
top class Fx.Cycles.inOutUp
Extends Fx.Cycles,
top class Fx.Cycles.inOutDown
Extends Fx.Cycles,
Extends Class Element
Methods cycles | | returns an Fx.Cycles instance of the given type |
top method cycles
returns an Fx.Cycles instance of the given type
Arguments type | | the Fx.Cycles transition | options | | the Fx.Cycles options |
Example // scrollUp instance
var scrollUp = $('myElement').cycles('scrollUp');
// turnUp instance
var turnUp = $('myElement').cycles('turnUp', {duration: 2000, 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
|