Ins and Outs

You can achieve finer grained control over speed and easingby 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" transitionspeedOut:    null,  // speed of the "out" transition...easing:      null,  // easing method for both in and out transitionseaseIn:      null,  // easing for "in" transitioneaseOut:     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.

$('#s1').cycle({fx: 'zoom',speedIn: 2500,speedOut: 500,easeIn: 'bouncein',easeOut: 'easeout',sync: 0,delay: -4000});

$('#s2').cycle({fx: 'scrollDown',speedIn: 2000,speedOut: 500,easeIn: 'bounceout',easeOut: 'backin',delay: -2000});

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 sofar has been built on custom transitions under the hood. To understand how transitions really work, and how you cancustomize 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 propertyis 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 valuescan 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 andthe 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 usedifferent effects for the in and out slides.

$('#s3').cycle({fx: 'custom',cssBefore:{ left: 232, top: -232, display: 'block'},animIn: { left: 0,top: 0 },animOut: { left: 232, top: 232},delay: -3000});	$('#s4').cycle({fx: 'custom',sync: 0,cssBefore: { top: 0,left: 232,display: 'block'},animIn: {left: 0},animOut: { top: 232},delay: -1000});
$('#s5').cycle({fx: 'custom',cssBefore: { left: 115, top: 115, width: 0, height: 0, opacity: 1,zIndex: 1},animOut: { opacity: 0 },animIn: { left: 0, top: 0, width: 200, height: 200 },cssAfter: { zIndex: 0},delay: -3000});	$('#s6').cycle({fx: 'custom',cssBefore: { top: 0,left: 0,width: 0,height: 0, zIndex: 1 },animIn: { width: 200,height: 200 },animOut: { top: 200,left: 200,width: 0,height: 0},cssAfter: { zIndex: 0 },delay: -1000});

Things to Keep in Mind

- Not all CSS properties can be animated! Internet Explorer will make you pay if you defineproperties in the animIn or animOut options that are not animatable.For example, don’t try to animate the z-index property!