
$('#vetito_1').cycle({
	fx:  'custom',
	cssBefore:{ 
		left: 232,  
		top: -232, 
		display: 'block'
	},
	animIn: { 
		left: 0,
		top: 0 
	},
	animOut: { 
		left: 232,  
		top: 232
	},
	delay: -3000
});


$('#vetito_2').cycle({
	fx:  'custom',
	sync: 0,
	cssBefore: { 
		top:  0,
		left: 232,
		display: 'block'
	},
	animIn:  {left: 0},
	animOut: {top: 232},
	delay: -1000
});


$('#vetito_3').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
})


$('#vetito_4').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
});

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!

‹‹ cycle homejQuery Cycle Plugin - Custom Transitions

Things to Keep in Mind