jQuery淡出新图像
如何用jquery将一个图像淡化为另一个图像？ 据我所知，你会使用fadeOut，用attr（）更改源，然后再次使用fadeIn。 但这似乎并不合适。 我不想使用插件，因为我希望添加相当多的更改。
谢谢。
在最简单的情况下，您需要在调用fadeOut（）时使用回调 。
假设页面上已有图片标记：
您将函数作为回调参数传递给fadeOut() ，该函数重置src属性，然后使用fadeIn()淡化：
$("#image").fadeOut(function() { $(this).load(function() { $(this).fadeIn(); }); $(this).attr("src", "http://sstatic.net/su/img/logo.png"); });
对于jQuery中的动画，在动画完成后执行回调。 这使您能够按顺序链接动画。 注意对load()的调用。 这样可以确保在淡入之前加载图像（感谢Y. Shoham）。
这是一个有效的例子
$("#main_image").fadeOut("slow",function(){ $("#main_image").load(function () { //avoiding blinking, wait until loaded $("#main_image").fadeIn(); }); $("#main_image").attr("src","..."); });
好吧，您可以将下一个图像放在当前图像后面，然后淡出当前图像，使其看起来好像正在淡入下一个图像。
完成淡入淡出后，您可以换回图像。 粗略地说：
![]()
![]()
你确定你正在使用你传入fadeOut的callback来改变源attr然后调用fadeIn吗？ 你不能顺序调用fadeOut ， attr()和fadeIn 。 你必须等待fadeOut才能完成……
老问题，但我想我会回答。 我将它用于主页上的大标题图像。 通过操纵当前和下一个图像的z-index可以很好地工作，显示当前图像下面的下一个图像，然后淡出当前图像。
CSS：
#jumbo-image-wrapper { width: 100%; height: 650px; position: relative; } .jumbo-image { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
HTML：
Javascript（jQuery）：
function jumboScroll() { var num_images = $("#jumbo-image-wrapper").children(".jumbo-image").length; var next_index = jumbo_index+1; if (next_index == num_images) { next_index = 0; } $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).css("z-index", "10"); $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).css("z-index", "9"); $("#jumbo-image-wrapper").children(".jumbo-image").eq(next_index).show(); $("#jumbo-image-wrapper").children(".jumbo-image").eq(jumbo_index).fadeOut("slow"); jumbo_index = next_index; setTimeout(function(){ jumboScroll(); }, 7000); }
无论在#jumbo-image-wrapper div中有多少个带有.jumbo-image类的“幻灯片”，它都能正常工作。
对于那些希望图像根据宽度百分比 （根据浏览器宽度进行缩放）进行缩放的人，显然您不希望在CSS中设置PIXEL的高度和宽度。
这不是最好的方法，但我不想使用任何JS插件。
那么你能做的是：
- 创建一个相同大小的透明PNG并将ID作为第二个横幅放置
- 将原始图像命名为第一个横幅
- 将它们都置于DIV之下
以下是CSS结构供您参考：
.design-banner { position: relative; width: 100%; #first-banner { position: absolute; width: 100%; } #second-banner { position: relative; width: 100%; } }
然后，您可以安全地淡出原始横幅，而不会在图像移动和上下闪烁后放置内容