Question

I have for example 9 images, 3 shown from the begining. I want to make them fade to one other image once each at time, sequentially, e.g.: http://jsfiddle.net/linuxatico/C9Tw2/7/

In this version I have 3 cycle calls, separeted by timing initialization. What I found is that with 3 different cycles, the more time passes, the more timing effects goes wrong overlapping the fading images. I believe this can be solved with a single Cycle animation, but I can’t figure out how to do that. Do you have a solution?

HTML:

<div class="container">
    <ul class="first">
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" /></li>
        <li><img width="200" height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" /></li>
    </ul>
    <ul class="second">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00001.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00002.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00003.jpg" /></li>
    </ul>
    <ul class="third">
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00004.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00005.jpg" /></li>
        <li><img width="200" height="200" src="http://static.blogo.it/gamesblog/test-drive-unlimited-2-13/Image00006.jpg" /></li>
    </ul>
</div>

JS:

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000
});
jQuery('.second').cycle({
    fx:     'fade',
    delay:  -2000
});
jQuery('.third').cycle({
    fx:     'fade',
    delay:  -3000
});

EDIT: I have a slighty different request here: 3 transitions, pausetime between transitions

Answer 1

You can add a callback to the transitions end.

jQuery('.first').cycle({
    fx:     'fade',
    delay:  -1000,
    after: function(){change('.second')}
});
jQuery('.second').cycle({
    fx:     'fade',
    timeout: 0,
    after: function(){change('.third')}
});
jQuery('.third').cycle({
    fx:     'fade',
    timeout: 0,
});

function change(what)
{
    jQuery(what).cycle("next");
}

JSFiddle: http://jsfiddle.net/c7UXM/