CODEWITHSUNDEEP
jqueryanimationsliderjquery-cyclejquery-cycle2
Ryan Palmer
Ryan Palmer

Reputation: 543

Delay before and after animation with the jQuery Cycle plugin

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:

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/

Upvotes: 1

Views: 2421

Answers (2)

BomAle
BomAle

Reputation: 99

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

Upvotes: 0

PHearst
PHearst

Reputation: 771

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.

Upvotes: 1

Related Questions