This first demo shows the default 'wipe' transition effect:

Default

$('#wipe0').cycle('wipe');

These next three demos show how to use the following pre-defined constants for the 'clip' option:

'l2r': left-to-right
'r2l': right-to-left
't2b': top-to-bottom
'b2t': bottom-to-top
'zoom': center-to-edges

clip: 'l2r'

clip: 't2b'

clip: 'zoom'

$('#wipe1').cycle({
   fx:     'wipe',
   speed:   1000,
   timeout: 6000,
   delay:  -4000,
   clip:   'l2r'
});

$('#wipe2').cycle({
   fx:     'wipe',
   speed:   1000,
   timeout: 6000,
   delay:  -2000,
   clip:   't2b'
});

$('#wipe3').cycle({
   fx:     'wipe',
   speed:   1000,
   timeout: 6000,
   clip:   'zoom'
});

These final two demos show how to take control of the clip animation by defining the initial clip rect in the cssBefore option. The transition will use this value as the starting clip area and animate it to the full size of the slideshow container.


$('#wipe4').cycle({
   fx:        'wipe',
   cssBefore: {clip: 'rect(0 116px 0px 116px)'},
   timeout:   6000,
   delay:    -3000
});

$('#wipe5').cycle({
    fx:       'wipe',
    timeout:   6000,
    delay:    -2000,
    cssBefore: {
       clip: 'rect(232px 116px 232px 116px)'
    }
});

‹‹ cycle homejQuery Cycle Plugin - 'Wipe' Demo

'wipe' transition demos

Default

clip: 'l2r'

clip: 't2b'

clip: 'zoom'