jQuery Cycle simultaneous fade

Question

I am having an issue with the jQuery Cycle Lite Plugin (http://jquery.malsup.com/cycle/)

The images seem to be fading out completely before fading in, and I want them to fade in/out simultaneously. http://hardingandwhitlock.com/v6/content/background

I have the sync option set to 1

$.fn.cycle.defaults = {
     timeout:       2000, 
     speed:         200, 
     next:          null, 
     prev:          null, 
     before:        null, 
     after:         null, 
     height:       'auto',
     sync:          1,    
     fit:           0,    
     pause:         0,    
     delay:         0,    
     slideExpr:     null  
};

any help is much appreciated!

Answer 1

It sounds like you are trying to do a cross-fade transition from one image to another. To do this, you'll want to use two images:

<img id="backImg" />
<img id="frontImg" />

Set #backImg to be behind #frontImg like so:

#backImg
{
    position: absolute;
}

Then fadeOut the front image... this will automatically do your crossfade effect because the back image is already loaded behind it. When the fade is done, set the source of the front image to the back image's src, show it, and pre-load the next image into the back image:

function transitionImages(preloadImgUrl)
{
    $("#frontImg").fadeOut("slow", function()
    {
        $("#frontImg").attr("src", $("#backImg").attr("src")).show();
        $("#backImg").attr("src", preloadImgUrl);
    }
}

This all assumes your images are identically sized. If not, you'll want to be just a little more elaborate with the css and wrap the images in divs that fade out.

Answer 2

This ended up being caused by some <br> being inserted between the <img> tags, and the script was fading those in/out as well in between all the images

The site is being done in Drupal, so the images should be inserted into the body as

<div id="slideshow"><img src="" /><img src="" />...</div>

instead of on separate lines

<div id="slideshow">
   <img src="" />
   <img src="" />
</div>

Drupal seems to insert <br> between each separate line. Not sure if other CMS will do the same