Question

I’m making this slideshow but when the images animate I get a white flash THEN the next image. It’s a bit difficult to explain so I created this http://jsfiddle.net/2SJ8B/
I imagine it has something to do with my css?

#slideshow {
    width: 700px;
    height: 400px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

#slideshow img {
    position: absolute;
    height: 500px;
    width: 700px;
}​

You’ll notice it’s not a smooth animation but there’s something going on. Thanks!

Answer 1

Try this updated fiddle…

http://jsfiddle.net/2SJ8B/5/

The key is the function in the fadeIn() command that runs after the fade is complete…

$('#slideshow img:first').appendTo('#slideshow').fadeIn(1000, function() {
    $(this).siblings().hide();
});

It means that it takes the first image, puts it after the last one (in front of it), and then fades it in. Once that’s done it hides all the other images. After a second, it repeats. Now that the dual fading is gone, the white “flash” is gone.