jquery图像淡入和淡出同时？

Question

我正在尝试使用jquery交换b / w少量图像。有几种方法可以做到这一点......

1. 淡出当前图像，然后完成后，淡入新图像。 （这很容易，我能够复制它）
2. fadeOut当前图像并同时淡入新图像...（我能想到的唯一解决方案是拥有两个图像标记，首先淡出当前图像，然后在新图像中逐渐淡出）

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

Answer 1

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

如果您的图片大小相同，那么我过去使用的解决方案就更好了。你需要两个嵌套的<div>：

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

从CSS将其宽度/高度设置为图像的宽度/高度，并从JavaScript执行以下操作：

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

这样，你只会褪色一个元素（所以速度很快），但你会得到一个非常好的效果。请务必预先加载图片以获得无缝体验。

Answer 2

使用Jquery.Cycle

Jquery.cycle可以像这样设置

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

Answer 3

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

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

Answer 4

将两个图像放在同一位置，css的position属性为绝对值。然后尝试

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