Delay before and after animation with the jQuery Cycle plugin

Question

Working on a slideshow script with the jQuery Cycle2 plugin callback events. The actual cycle itself using the fade transition on div elements. Within the div's are the images. I'm then using the callback events to animate the images from from off the screen on the right to left. Then the next event animates the image off the screen on the right.

The script works, but the problem I'm having is the image animation runs in sequence with the fade transition. As soon as an event is triggered, the image slides out of view and the div fades out, all at once. The effect I'm trying to achieve would be like this model:

• Trigger event
• Div fades in
• Short delay
• Image animation slides in
• Trigger event
• Image animation slides out
• Short delay
• Div fades out

Essentially, I want to let the image animation complete before the cycle plugin fade transition runs. I just can't figure out how to set that delay.

For reference, the Cycle2 API: http://jquery.malsup.com/cycle2/api/

$('.slides').on('cycle-next, cycle-before', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).stop().animate({
            left: -3000,
        }, 1000);
    });
});

$('.slides').on('cycle-next', function(e, opts) {
    $('.slide.active img').each(function() {
        $(this).css({
            left: 3000,
            display: 'block'
        });
        $(this).stop().animate({
            left: 0
        }, 1000, 'easeOutQuad');
    });
});

Any help anyone can provide would be hugely appreciated!

Edit: Setup a quick fiddle of the working script: http://jsfiddle.net/ardsN/

Answer 1

The cleanest way is to define this in a Cycle2 plugin Cycle2 Advanced API

Here's how Malsup has done this with the shuffle and tile plugins.

Answer 2

try get state of slider into this way:

jQ('.cycle-slideshow').data( 'cycle.opts').busy

you could use:

jQ( document ).ready(function() {
    jQ(document.documentElement).keypress(function (e) {
        if (e.keyCode == 39 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
           jQ('.cycle-slideshow').cycle("next");
        }
        if (e.keyCode == 37 && jQ('.cycle-slideshow').data( 'cycle.opts').busy !== true)
        {
            jQ('.cycle-slideshow').cycle('prev');
        }
    });
});