jQuery Cycle Fade In/Out Help

Question

I've been using this script http://jquery.malsup.com/cycle/

And using the "Fade" transition. (Top row of the page on the right.) I need to edit the script so that the image fades all the way out to a white background and the next image fades all the way in. Right now they're sort of fading into each other. I've looked over the page and options and I think it might have to do with editing the actual script and not just defining an effect. Any help? Thanks!

Answer 1

You can set "sync" equal to 0 so that the transitions will not occur simultaneously.

$('.pics').cycle({ 
    fx:      'fade', 
    speedIn:  1000, 
    speedOut: 1000,
    sync:     0
});

You should be able to control the background color via CSS.

.pics img {  
    padding: 15px;  
    border:  1px solid #ccc;  
    background-color: #fff;  
    width:  200px; 
    height: 200px; 
    top:  0; 
    left: 0 
} 

http://jquery.malsup.com/cycle/options.html