如何进行淡入淡出过渡’交叉渐变’？

我试图让这个交叉淡入淡出，但我不完全确定如何。

如何让这个jQuery方法交叉淡化图像？

$('a.thumb').click(function () { var src = $(this).attr('href'); if (src != $('div#imageDisplay > img').attr('src')) { $('div#imageDisplay > img').stop().animate({ opacity: '0', duration: 500 }, function () { $(this).attr('src', src); }).load(function () { $(this).stop().animate({ opacity: '1', duration: 500 }); }); } return false; }); 

Answer 1

两个图像之间的交叉淡入淡出（其中一个淡出而另一个淡入）需要两个图像，每个图像都有自己的动画。 仅使用一个图像标记就无法做到这一点。 你需要两张图片。 有一些方法可以为其中一个图像使用背景图像，但坦率地说，这比使用两个标签更复杂。

这是一些使用两个图像标记实现交叉淡入淡出的jQuery：

 // precache all images so they will load on demand var imgs = []; $('a.thumb').each(function() { var img = new Image(); img.src = this.href; imgs.push(img); }).click(function () { var oldImg = $("#fadeContainer img"); var img = new Image(); img.src = this.href; var newImg = $(img).hide(); $("#fadeContainer").append(img); oldImg.stop(true).fadeOut(500, function() { $(this).remove(); }); newImg.fadeIn(500); return false; });​ 

你可以在这里看到它的工作： http ： //jsfiddle.net/jfriend00/frXyP/

这基本上是它的工作原理：

1. 获取当前图像
2. 创建新的图像对象
3. 从单击的链接获取URL并分配给新的图像标记
4. 隐藏新图像
5. 将新图像插入fadeContainer
6. 启动fadeOut现有图像和淡入淡出或新图像
7. 当fadeOut完成后，删除该图像，以便为下一个周期做好准备

Answer 2

你不能用一个img元素交叉淡入淡出，至少需要两个。 一个是不透明的，另一个是褪色的。 请考虑将一个img定位在另一个上，在css中设置为’display：none’，然后调用’fadeIn’。