cross fade image to background

Question

I'm looking to a simple crossfadding backround image.

I have a initial background image and when the user click in the other thumbs the background image switch with a fadeIn to the new image

I have this code:

$('#backgroundDiv img').fadeOut(550,'linear', function(){
    $('#backgroundDiv img').attr({'src':img_fs});
     //if(this.complete)
    $('#backgroundDiv img').fadeIn(250,'linear');
});

but it first makes a fadeOut and after a fadeIn. I don't want a fadeOut because I don't want to see the background color. I comment one line because in IE9 and Chrome it crashes.

Can anyone help me with any cross fadding??

Thanks

Answer 1

So what you want is fading out an image, and fading in another one that is virtually "under" the first one, right ?

Your code waits for the first image to disappear before fading in the other one.

What i suggest is that you do both actions at the same time, so that when the first image starts to disappear, the second one already started to appear :

$('#backgroundDiv img').fadeOut(550,'linear');
$('#apresentacaoBgImage img').attr({'src':img_fs}).fadeIn(250,'linear');

EDIT : If you only have one image, that's literally not possible. So we have to create a copy of that image and do the stuff you want with those two ones, because at some point (when the first image starts to disappear and the second one starts to appear) we definitely need two images. Here's what i did :

Note that the div #backgroundDiv must only contain one image, since it's used as position: relative to position the second image under the first one before all the fancy stuff.

Working example here.

HTML :

<div id="backgroundDiv" style="position: relative;">
    <img src="http://trollface.sparxified.com/Trollface_HD.jpg" width="200px" height="200px" />
</div>

JS :

var img_fs = 'http://driph.com/words/wp-content/uploads/2008/04/e.gif';
$("#backgroundDiv img").clone().appendTo("#backgroundDiv").hide().attr({ src: img_fs }).css({ position: 'absolute', top: 0, left: 0 });
$("#backgroundDiv img:first").fadeOut(550,'linear');
$("#backgroundDiv img:last").fadeIn(550,'linear');

PS : i modified the duration of both fadeIn() and fadeOut() to be the same as it looked weird with different ones.

Answer 2

maybe this would help you

$('#backgroundDiv img').hide()
$('#apresentacaoBgImage img').attr('src',img_fs).fadeIn(250,'linear');