我正在寻找一个简单的交叉渐变背景图像。
我有一个初始背景图像，当用户单击其他拇指时，背景图像会以淡入方式切换到新图像
我有这个代码：
$('#backgroundDiv img').fadeOut(550,'linear', function(){
$('#backgroundDiv img').attr({'src':img_fs});
//if(this.complete)
$('#backgroundDiv img').fadeIn(250,'linear');
});
但它先是淡出，然后是淡入。我不想淡出，因为我不想看到背景颜色。我评论了一行，因为在 IE9 和 Chrome 中它崩溃了。
任何人都可以帮助我进行交叉渐变吗？？
谢谢
【问题讨论】：
标签： javascript jquery image background-image
也许这会对你有所帮助
$('#backgroundDiv img').hide()
$('#apresentacaoBgImage img').attr('src',img_fs).fadeIn(250,'linear');
【讨论】：
所以你想要的是淡出一个图像，然后淡入几乎“低于”第一个图像的另一个图像，对吧？
您的代码会等待第一张图片消失，然后再淡入另一张。
我的建议是你同时做这两个动作，这样当第一个图像开始消失时，第二个图像已经开始出现：
$('#backgroundDiv img').fadeOut(550,'linear');
$('#apresentacaoBgImage img').attr({'src':img_fs}).fadeIn(250,'linear');
编辑： 如果您只有一张图像，那实际上是不可能的。所以我们必须创建该图像的副本并使用这两个图像做你想要的东西，因为在某些时候（当第一个图像开始消失并且第二个图像开始出现时）我们肯定需要两个图像。这是我所做的：
请注意，div #backgroundDiv 必须只包含一张图片，因为它被用作position: relative 以将第二张图片在第一张图片的所有花哨的东西之前。
HTML：
<div id="backgroundDiv" style="position: relative;">
<img src="http://trollface.sparxified.com/Trollface_HD.jpg" width="200px" height="200px" />
</div>
JS：
var img_fs = 'http://driph.com/words/wp-content/uploads/2008/04/e.gif';
$("#backgroundDiv img").clone().appendTo("#backgroundDiv").hide().attr({ src: img_fs }).css({ position: 'absolute', top: 0, left: 0 });
$("#backgroundDiv img:first").fadeOut(550,'linear');
$("#backgroundDiv img:last").fadeIn(550,'linear');
PS : 我修改了 fadeIn() 和 fadeOut() 的持续时间，使其看起来很奇怪。
【讨论】：