CODEWITHSUNDEEP
jqueryimagefadeinfadeout
Wesley Smits
Wesley Smits

Reputation: 1344

jQuery how to do things simultaniously

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

Upvotes: 1

Views: 104

Answers (4)

Pulkit Mittal
Pulkit Mittal

Reputation: 6086

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.

Upvotes: 0

abhshkdz
abhshkdz

Reputation: 6365

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.

Upvotes: 3

Thomas Clayson
Thomas Clayson

Reputation: 29925

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/

Upvotes: 1

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

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.

Upvotes: 5

Related Questions