我试图让这个交叉淡入淡出,但我不完全确定如何.
如何让这个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;
});
解决方法
两个图像之间的交叉淡入淡出(其中一个淡出而另一个淡入)需要两个图像,每个图像都有自己的动画.仅使用一个图像标记就无法做到这一点.你需要两张图片.有一些方法可以为其中一个图像使用背景图像,但坦率地说,这比使用两个< img>更复杂.标签.
这里有一些使用两个图像标签实现交叉淡入淡出的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/
这基本上是它的工作原理：
>获取当前图像>创建新的图像对象>从点击的链接中获取URL并分配给新的图像标记>隐藏新图像>将新图像插入fadeContainer>启动fadeOut现有图像和淡入淡出或新图像>当fadeOut完成时,删除该图像,以便为下一个周期做好准备
