Javascript 短时间后将图像源更改回原处

我试图在延迟两秒钟后更改图像的来源。我正在更改源，等待两秒钟，然后将其更改回另一个随机图像。这是我的职责：

function ChangeToBomb() {
    var aantalPionnenOpScherm = $('#depionnen img')
    var randomPion = Math.floor(Math.random() * aantalPionnenOpScherm.length);
    var randomBom = Math.floor(Math.random() * bombs.length);
    $('#depionnen img:nth-child(' + randomPion + ')').fadeOut(100, function() {
        $(this).attr('src', bombs[randomBom]).fadeIn(100).delay(2000)
        $(this).fadeOut(100)
        $(this).attr("src", pictures[randomPion])
    })
}

其有效期至：

$(this).fadeOut(100)

---

有人知道解决方案吗？

您没有正确链接函数，最后的

src

更改应该在回调中，否则将立即执行。尝试：

$('#depionnen img:nth-child(' + randomPion + ')').fadeOut(100, function() {
    var $this = $(this);
    $this.attr('src', bombs[randomBom]).fadeIn(100)
      .delay(2000).fadeOut(100, function() {
          $this.attr("src", pictures[randomPion]);
      });
})

---

您应该将回调传递到

fadeOut

，作为第二个参数，您必须在其中写入逻辑…然后再次fadeIn

var $img = $('img');
var imgArr = [
    'http://placehold.it/220x110&text=img1',
    'http://placehold.it/220x110&text=img2'];
$img.attr('src', imgArr[0]).load(function () {
    $img.fadeIn(1000);
});

$('#btnChange').click(function () {
    var current = $img.attr('src');
    var idx = imgArr.indexOf(current);
    var k = idx == 0 ? 1 : 0;
    $img.fadeOut(1000, function () {
        $img.attr('src', imgArr[k]);
    });
});

---

Fiddle:

尝试使用JS本机setTimeout函数调用

function ChangeToBomb() {
    var aantalPionnenOpScherm = $('#depionnen img')
    var randomPion = Math.floor(Math.random() * aantalPionnenOpScherm.length);
    var randomBom = Math.floor(Math.random() * bombs.length);
    $('#depionnen img:nth-child(' + randomPion + ')').fadeOut(100, function () {
        var img = $(this);
        img.attr('src', bombs[randomBom]).fadeIn(100, function () {
            window.setTimeout(function () {
                img.attr("src", pictures[randomPion]).fadeOut(100);
            }, 2000);
        });             
    })
}

---

这也是假设像“炸弹”和“图片”这样的东西可以在这个范围内访问。

谢谢大家的帮助，我找到了答案。我只是忘了在更改源后淡入

函数ChangeToBomb（）{

---

您是否尝试在每行之后添加一些

；

？console或console.log

bombs[randomBom]

和

图片[randomPion]上是否有错误

？我没有任何错误消息。我尝试在每一行之后添加；但它不会改变任何东西。

爆炸。除非您共享完整的代码，否则长度将是未定义的。它是否应该同时淡出并更改源代码？当您说它工作到…淡出当前发生了什么？我尝试了s、 但不幸的是，这并没有改变任何事情。
            var aantalPionnenOpScherm = $('#depionnen img')
            var randomPionUitArray = Math.floor(Math.random() * pictures.length);
            var randomPionOpScherm = Math.floor(Math.random() * aantalPionnenOpScherm.length);
            var randomBom = Math.floor(Math.random() * bombs.length);


            $('#depionnen img:nth-child(' + randomPionOpScherm + ')').fadeOut(100, function() {
                $(this).attr('src', bombs[randomBom]).fadeIn(100).delay(2000);
                $(this).fadeOut(100,function(){
                    $(this).attr("src", pictures[randomPionUitArray]).fadeIn(100)
                });
            })


        }