Change image source back after a short period

Question

I am trying to change the source of an image after a delay of two seconds. I am changing the source, waiting for two seconds and then changing it back to another random image. This is my function:

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])
    })
}

It works until:

$(this).fadeOut(100)

Does someone know a solution?

Do you try to add some `;` after each line ? Do you have error on console ? Or console.log `bombs[randomBom]` and `pictures[randomPion]` ? — Arthur, Apr 22 '15 at 14:44
I do not have any error messages. I tried to add ; after each line but it doesn't change anything. — Mathias Verhoeven, Apr 22 '15 at 14:46
`bombs.length` would be undefined until and unless you share your complete code. — Sid M, Apr 22 '15 at 14:51
Is it supposed to fade out and change the source at the same time? And when you say it works until... what happens at the fadeOut currently? — Daved, Apr 22 '15 at 14:54

Blazemonger · Answer 1 · 2015-04-22T17:41:23.033

1

You aren't chaining the functions properly, and the last src change should be inside a callback or it will be executed immediately. Try:

$('#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]);
      });
})

edited Apr 22 '15 at 17:41

answered Apr 22 '15 at 14:47

Blazemonger

90,923
26
142
180

I tried this, but unfortunately it doesn't change a thing. – Mathias Verhoeven Apr 22 '15 at 14:50

deostroll · Answer 2 · 2015-04-22T15:14:35.543

You should pass a callback into fadeOut as the second argument wherein you have to write the logic...and then fadeIn back again...

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: http://jsfiddle.net/54ushz8w/1/

score 0 · Answer 3 · answered Apr 22 '15 at 15:01

Try using the JS native setTimeout function call.

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);
        });             
    })
}

This is also assuming things like "bombs" and "pictures" are accessible to this scope.

score 0 · Answer 4 · answered Apr 22 '15 at 15:09

Thank you all for your help, I found the answer. I just forgot to fade in after changing the source.

function ChangeToBomb() {

            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)
                });
            })


        }

Change image source back after a short period

4 Answers4