jquery图像淡入和淡出同时？

Question

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 .... ?

Answer 1

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.

Answer 2

Use Jquery.Cycle

Jquery.cycle can be set up like this

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

Answer 3

我很懒，只是使用jQuery Cycle Lite 。

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

Answer 4

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

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