‹‹ cycle homejQuery Cycle Plugin - Advanced Demos

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. 

$('#s1').cycle({
    fx:      'zoom',
    speedIn:  2500,
    speedOut: 500,
    easeIn:  'easeInBounce',
    easeOut: 'easeOutElastic',
    sync:     0,
    delay:   -4000
});
 
$('#s2').cycle({
    fx:      'scrollDown',
    speedIn:  2000,
    speedOut: 500,
    easeIn:  'easeInCirc',
    easeOut: 'easeOutBounce',
    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 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. 

$('#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,
		display: 'block'
    },
    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, 
		display: 'block'
    },
    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 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) ››