Ins and Outs
You can achieve finer grained control over speed
and
easing
by using the in/out versions of these properties.
From the plugin source:
$.fn.cycle.defaults = {
...
speed: 1000, // speed of the transition (any valid fx speed value)
speedIn: null, // speed of the "in" transition
speedOut: null, // speed of the "out" transition
...
easing: null, // easing method for both in and out transitions
easeIn: null, // easing for "in" transition
easeOut: null, // easing for "out" transition
...
};
The speedIn
and easeIn
properties are applied when
a slide is transitioned in. If not defined, these values are set to the
values of the speed
and easing
options, respectively.
The speedOut
and easeOut
properties are applied
when a slide is transitioned out. If not defined, these values are set
to the values of the speed
and easing
options,
respectively.
You now can put a new twist on your transitions by taking advantage of these in/out options.
|
|
Custom Transitions
This is where things start to get fun. Custom transitions let you unlock the full power of the Cycle Plugin. Everything you've learned so far has been built on custom transitions under the hood. To understand how transitions really work, and how you can customize them, you need to understand five more option properties:
cssBefore
- The styles that are applied to a slide immediately before it is transitioned in.
animIn
- The styles that are animated as a slide is transitioned in.
animOut
- The styles that are animated as a slide it transitioned out.
cssAfter
- The styles that are applied to a slide immediately after it is transitioned out.
cssFirst
- The styles that are applied once to the first slide - the one that is initially showing. This property is a be-kind-to-IE property. It is necessary to keep IE happy when animating out the first slide. Any properties that are animated must have initial values, otherwise IE will bork. These values can be defined in CSS, but this property removes the dependency on the external CSS definition.
You may have just realized that this gives you full control over both the incoming slide and the outgoing slide. You can choose which properties to animate, where the slide should start, etc. Cool!
Use these options, along with the custom
fx option, to create
transitons that use different effects for the in and out
slides.
|
|
|
|
Things to Keep in Mind
- Not all CSS properties can be animated! Internet Explorer will make you pay
if you define properties in the animIn
or animOut
options that are not animatable. For example, don't try to animate the
z-index
property!
Next up: Advanced Demo (Part 2) ››