jQuery img src 更改不是立即的

Question

我在一个简单的图片库中使用 jQuery。图像淡出，src 更改，然后淡入。

上一张图像经常会淡入；只有当元素达到完全不透明度时才会显示新图像。

什么可能导致延迟并随后跳转到新图像？

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()的回调中，但现在问题明显发生每个 时间。图像一路淡出，然后一路淡入，然后发生变化。

解决方案:位于 this answer ，.each() 函数在新图像的 fadeIn() 期间导致轻微闪烁，但删除 .each() 部分完全修复这个。

Answer 1

我建议添加 fadeIn 函数作为 fadeOut 的回调函数。这样您就可以确保 -out 动画在加载新图像之前完成。

参见文档:http://api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() {
    // Animation complete.
    // Do fadeIn function here
});