Демонстрация JQuery Cycle Plugin. Часть 5

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

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