jquery图像淡入和淡出同时？

Question

我想使用jquery交换黑白图像。有几种方法可以做到这一点...

1. fadeOut当前图像，一旦它完成后，淡入淡出新图像。 （这很容易，我已经能够复制它）
2. fadeout当前图像，同时淡入新图像...（我唯一能想到的解决方案是有两个图像标记，第一个淡出当前图像，第二个在新的图像褪色）

有没有更好或不同的解决方案相同....？

Answer 1

这取决于您的要求。如果您的图像大小不同（高宽比），是的，唯一的解决方案是将两个图像叠加在一起并同时淡入/淡出。

如果您的图片尺寸相同，我以前使用过更好的解决方案。你把两个嵌套<div> S：

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

从CSS设置它们的宽度/高度将图像的宽度/高度，也从JavaScript如下：

1. 设置内部div的背景图片到第一个图像
2. 将外部div的背景图像设置为第二个图像
3. 淡出内部div（这将在两个图像之间创建一个非常好的平滑过渡效果）;
4. 设置内div的背景图像提供给第三图像
5. 淡入内的div
6. 设置外div的背景图像提供给第四图像
7. 淡出内的div
8. 等...

这样，你只会消失一个元素（所以它很快），但你会得到一个非常好的效果。确保预先加载图像以获得无缝的体验。

Answer 2

将图像放在同一位置，并将css的位置属性设置为绝对。然后尝试

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

Answer 3

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

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

Answer 4

使用Jquery.Cycle

Jquery.cycle可以设立这样

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