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. :)

4 Answers 4

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.
5
  • You might want to set an onLoad-callback on the image with the FadeIn part before setting the src as well. Oct 25, 2012 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. Oct 25, 2012 at 14:47
  • It doesn't? I never had any problems with it. Can you link to someone who has? Oct 25, 2012 at 14:48
  • @PerSalbark Certainly. Oct 25, 2012 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. Oct 25, 2012 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.

2
  • 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: 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. Oct 25, 2012 at 15:02
  • Try changing fadeout time from slow to fast and see if that is what you are looking for. :)
    – abhshkdz
    Oct 25, 2012 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/

1
  • 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 :) Oct 25, 2012 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.

3
  • 1
    It's good to know what wrong happened here, because of which my answer was downvoted. It helps people. Oct 25, 2012 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. Oct 25, 2012 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, 2012 at 15:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.