1

I can't seem to figure out how to do the following in a good way.

I need to fade an image out. Change the source of the image. Then fade it back in.

But problem is the fadeOut and fadeIn should be at the same time. Of course the way i am doing it now (read a couple of lines down) will change the source during the fadeOut which is very noticable.

$('#lightboxImage').fadeOut('slow');
$('#lightboxImage').attr('src', 'an imagesource');
$('#lightboxImage').fadeIn('fast');

When i just run this. it changes the image before the fadeOut.

When i put the two second lines in the fadeOut callback function. There is a small period of white screen before the new image fades in.

Hope someone can help me figuring this out. :)

Mogsdad
  • 40,814
  • 19
  • 140
  • 246
Weszzz7
  • 856
  • 6
  • 19
  • 32

4 Answers4

5

You should use the fadeOut call back function. See below,

$('#lightboxImage').fadeOut('slow', function () {
   // Callback function that will be called after fadeOut
   $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

Below is from jQuery documentation,

.fadeOut( [duration] [, easing] [, callback] )

  • durationA string or number determining how long the animation will run.
  • easingA string indicating which easing function to use for the transition.
  • callbackA function to call once the animation is complete.
Selvakumar Arumugam
  • 76,636
  • 14
  • 118
  • 132
  • You might want to set an onLoad-callback on the image with the FadeIn part before setting the src as well. – Per Salbark Oct 25 '12 at 14:46
  • @PerSalbark That poses its own set of problems, since jQuery doesn't properly detect loading of cached images without some jiggery-pokery on the developer's part. Better to just preload the image with the document. – Blazemonger Oct 25 '12 at 14:47
  • It doesn't? I never had any problems with it. Can you link to someone who has? – Per Salbark Oct 25 '12 at 14:48
  • @PerSalbark [Certainly](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached). – Blazemonger Oct 25 '12 at 14:49
  • @Blazemonger: Ok, thats for when the src i already set. In this case he is setting it as a part of the function, so I think he will be alright. – Per Salbark Oct 25 '12 at 14:52
3

Use callback functions.

$('#lightboxImage').fadeOut('fast', function() {
    $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

The wikipedia page explains callback functions well.

In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.

abhshkdz
  • 6,065
  • 19
  • 29
  • Although is is in someway the way i want to go there is still a small moment where the screen is empty. What i need to do is almost exactly like on this page: http://fabriq.nl/moon-thinsulate-jas-navy-pf-12106.html If you click on the main image a lightbox pops up. Then press the next button. The transition you see here is what i'm looking for. – Weszzz7 Oct 25 '12 at 15:02
  • Try changing fadeout time from `slow` to `fast` and see if that is what you are looking for. :) – abhshkdz Oct 25 '12 at 15:05
1

I don't know if the answers that people are giving are what you want.

I think you want the first image to "fade into" the second image.

In this case, you will need to have two images, one behind the other.

The one behind will need to be display: none in css.

Then you can do:

$('img#image1').fadeOut();
$('img#image2').fadeIn();

And the first image should fade into the second one.

You'll need to position the two images absolutely so that the foreground one is covering the background one before the fade.

e.g. http://jsfiddle.net/vre4M/

This also allows you to go back and forward: http://jsfiddle.net/vre4M/1/

Thomas Clayson
  • 28,448
  • 25
  • 135
  • 216
  • Ah, yes this is exactly what i need to do. The problem is the code is quite complicated (i'm kind of new to both jQuery and magento.) Thanks for your example, i will see how far i get with this :) – Weszzz7 Oct 25 '12 at 15:09
0

Queuing them will do the trick:

$('#lightboxImage').fadeOut('slow', function () {
  $(this).attr('src', 'an imagesource').fadeIn('fast');
  });
});

Use $(this) for not finding it again and again.

EDIT: Updated my answer, because attr function does not have callback. Thanks guys.

Pulkit Mittal
  • 5,286
  • 5
  • 19
  • 26
  • 1
    It's good to know what wrong happened here, because of which my answer was downvoted. It helps people. – Pulkit Mittal Oct 25 '12 at 14:51
  • I think you've probably got downvoted because you've just copied the other answers and just changed `$('#lightboxImage')` to `$(this)`. Really it should have been a comment on the other answers, not a separate answer - which doesn't provide anything different to any of the other answers. Its just wasted space. – Thomas Clayson Oct 25 '12 at 14:57
  • @ThomasClayson he's not really copied any answer, but he has wrongly tried to define a callback for `attr`, which i don't think is allowed. So @pulkit, i think you got downvoted for a wrong answer, `attr` does not have a callback. – bool.dev Oct 25 '12 at 15:10