CODEWITHSUNDEEP
jqueryfadeinfadeoutfadeto
StealthRT
StealthRT

Reputation: 10552

jQuery cross fading 2 images

Hey all i am currently using this code below:

$('#tLight0').fadeTo(500,0.40, function() {
   var theToTurn = $(this).attr('data-toTurn');
   $(this).attr("src","site.com/Images/light_" + theToTurn + ".png");
}).fadeTo(300,1);

In order to cross fade my 2 images i have. However, the first image fades to about 40% transparent before the 2nd image begin to fade in.

What i am looking for is it to fade to (out) the first image and fade to (in) the second at the same time. Just like you see images being crossfaded.

I've tried all types of settings for fadeTo but it just doesnt seem to preform as how i just described it.

How can i modify my code above in order to get the results i am looking for?

Upvotes: 0

Views: 253

Answers (1)

Shomz
Shomz

Reputation: 37701

Two images in the same container, absolutely positioned.

If you're going to 40%:

  • fade out the first one
  • fadeout callback: change the z-indexes to put the second one in front
  • fadeout callback: fade in the second one

If you're going for a full fade (might be nicer)

  • fade one the first one, fade in the second one (no callbacks, it happens at the same time)

Upvotes: 2

Related Questions