JQuery Fade Images at the same time

I use jQuery for cross images.

This is the code I'm using:

$('.' + currentimage).fadeOut('slow', function() { $('.' + selectedimage).fadeIn('slow'); }); 

This attenuates the first image 100% before the selected image begins to fade. Is there an easy way to start fading in the second image when the first image has disappeared, say, 60-70%?

EDIT: All the good answers. I think there is one more problem. My images are not displayed on top of each other - and only one image is displayed at a time.

+4
source share
4 answers

Try

 $('.' + currentimage).fadeOut('slow'); $('.' + selectedimage).delay(100).fadeIn('slow'); 
+3
source

slow is 600 ms and 420 is 70%

 $('.' + currentimage).fadeOut('slow'); $('.' + selectedimage).delay(420).fadeIn(600); 
+3
source

You can trick and apply the fade part (using fadeTo , call your other function, and then continue.

 $('.' + currentimage).fadeTo('slow', .6, function() { $('.' + selectedimage).fadeIn('slow'); $(this).fadeOut('slow'); }); 
+1
source

This is because the function that you declare there for fadeOut() is a callback function that should only be called after fadeOut() . You just have to execute one element immediately after another to get the desired effect. This is not as accurate as starting with X% on fadeOut() , but you can probably adjust the time of fadeOut and fadeIn to get the effect you want or throw delay() on fadeIn .

 $('.' + currentimage).fadeOut('slow'); $('.' + selectedimage).fadeIn('slow'); 
-1
source

All Articles