3

我在一个简单的图片库中使用 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()部分完全解决了这个问题。

4

3 回答 3

1

这是因为javascript在继续执行代码之前不会等待fadeOut完成，使用类似这样的东西

    $('#slide img')
         .fadeOut(o, function(){
              $(this).attr('src', path + srcs[index] + ext);
              $('#slide img').fadeIn(i);
         });

它应该等到fadeOut 完成后再开始fadeIn。

于 2013-07-19T19:16:26.660 回答
1

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

请参阅文档：http ://api.jquery.com/fadeOut/

$('#slide img').fadeOut(o, function() {
    // Animation complete.
    // Do fadeIn function here
});
于 2013-07-19T19:18:58.597 回答
1

您可以在预加载功能上尝试这样的事情：

$.each(imgArray, function() {
    var i = new Image();
    i.src = path + this + ext;
});

而不是ajax调用，也可以在你的幻灯片功能上试试这个：

$('#slide img').fadeOut(o, function(){
    var that = this;
    this.src = path + srcs[index] + ext;
    this.onload = function() {
        $(that).fadeIn(i);
    };
});
于 2013-07-19T19:21:50.483 回答