CODEWITHSUNDEEP
jquery
Avi
Avi

Reputation: 251

jquery image fade-In and fade-Out at the same time?

I am trying to swap b/w few images using jquery. There are couple of ways to do so ...

  1. fadeOut current image and once its done then, fadeIn new image. (this is easy and i have been able to replicate it)
  2. fadeOut current image and simultaneously fadeIn new image ... (the only solution i can think for this is to have two image tag, first fading Out current image and second fading in new image )

Is there any better or different solution for the same .... ?

Upvotes: 0

Views: 10627

Answers (4)

Kimtho6
Kimtho6

Reputation: 6184

Use Jquery.Cycle

Jquery.cycle can be set up like this

$('.slides').cycle({
  fx:     'scrollHorz',
  speed:  400, 
  timeout: 0});

Upvotes: 1

Marcel
Marcel

Reputation: 28097

I'm lazy and just use jQuery Cycle Lite.

$("#lazy").cycle();

Upvotes: 0

Felix
Felix

Reputation: 89626

It depends on your requirements. If your images are of different sizes (aspect ratios), yes, the only solution is to stack two images on top of each other and fade in/out at the same time.

If your images have the same size, there's a nicer solution which I've used in the past. You take two nested <div>s:

<div><div></div></div>

From CSS set their width/height to the width/height of your images and do the following from JavaScript:

  1. Set the background image of the inner div to the first image
  2. Set the background image of the outer div to the second image
  3. Fade out the inner div (this will create a really nice and smooth transition effect between the two images);
  4. Set the background image of the inner div to the third image
  5. Fade in the inner div
  6. Set the background image of the outer div to the fourth image
  7. Fade out the inner div
  8. etc...

This way, you're only fading one element (so it's fast), but you get a really nice effect. Make sure to preload your images for a seamless experience.

Upvotes: 2

Arun David
Arun David

Reputation: 2784

Have both the images in same place with position attribute of css to absolute. then try

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

Upvotes: -1

Related Questions