我在一个简单的图片库中使用 jQuery。图像fadeOut,src 改变,然后fadeIn。
前一个图像经常淡入;只有当元素达到完全不透明度时,才会显示新图像。
什么可能导致延迟和随后跳转到新图像?
HTML
<div id="slide">
<img src="/img/products/image1.jpg">
</div>
JS
var index = 0;
$(function() {
if (srcs.length > 1) {
setInterval("slide(800, 800)", 6000);
}
});
function slide(o,i) {
index++;
if (index == srcs.length) index = 0;
$("#slide img").fadeOut(o, function() {
$(this).attr("src", path + srcs[index] + ext);
$(this).fadeIn(i);
});
}
编辑:我输入fadeIn()
了fadeOut()
's 回调,但现在每次都会出现明显的问题。图像一直淡出,然后一直淡入,然后发生变化。
解决方案:在这个答案中,该.each()
功能在新图像期间导致轻微闪烁fadeIn()
,但删除该.each()
部分完全解决了这个问题。