jQuery Fade Images simultaneously

Question

I am using jQuery to cross fade images.

This is the code I am using:

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

This is fading the first image out 100% before the selected image begins to fade in. Is there a simple way to begin fading in the second image when the first image has faded out by say 60-70%?

EDIT: All good answers. I think there is a further problem. My images are not showing up on top of each other - and only 1 image is visible at a time.

score 3 · Accepted Answer · answered Aug 15 '12 at 15:34

3

Try

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

answered Aug 15 '12 at 15:34

j08691

204,283
31
260
272

1

Cleanest way of doing it, despite all current answers working. – Reinstate Monica Cellio Aug 15 '12 at 15:43

Adam Merrifield · Answer 2 · 2012-08-15T15:40:42.113

3

slow is 600ms so 420 would be 70%

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

edited Aug 15 '12 at 15:40

answered Aug 15 '12 at 15:36

Adam Merrifield

10,307
4
41
58

2

I'd suggest using `.delay(420)` instead of `setTimeout()` as it's just cleaner, simpler code. – jfriend00 Aug 15 '12 at 15:37
But now it's just the same as an earlier answer ;) – Reinstate Monica Cellio Aug 15 '12 at 16:01
1

@Archer - It's not the same. Adam actually figured out the appropriate delay for 70%. The other answer did not. – jfriend00 Aug 15 '12 at 16:05

score 1 · Answer 3 · answered Aug 15 '12 at 15:37

1

You could cheat and apply part of the fade (using fadeTo, call your other function, and then continue.

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

answered Aug 15 '12 at 15:37

Igor

33,276
14
79
112

1

I like this, but wouldn't you `fadeIn` and `fadeOut` at the same time, not `fadeOut` after the `fadeIn` finishes? – Adam Merrifield Aug 15 '12 at 15:39

score -1 · Answer 4 · answered Aug 15 '12 at 15:35

That is because the function you are declaring there for fadeOut() is a callback function which is to be called only after the fadeOut() is complete. You should simply be able to execute one item right after the other to get the desired effect. This is not as exact as starting at X% on the fadeOut(), but you can probably adjust the fadeOut and fadeIn time to get the desired effect or throw in a delay() on the fadeIn.

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

The problem with this is the first image is fading to black, and then the other image only appears when the first image has finished fading out. — Patrick, Aug 15 '12 at 15:52

jQuery Fade Images simultaneously

4 Answers4

Linked