Jquery create animation swapping a series of images in a div

Question

I am trying to create an effect where i display a short animation wherever the user clicks on a page. For this i need to quickly swap background image of a div with an array of image once. I couldn't find a way to do that just with the animate() or fadeOut() methods in jquery, so i tried it with setTimeout() , but all in vain. Please guide me to the best technique for what i am trying to do.

JSFiddle

PS: I am having problems with including JSFiddle links in my posts, so i will leave it to others for edit. Although an explanation to this would help a lot.

Answer 1

This should work:

    var imgc;
var images = Array("http://s11.postimg.org/8iznatxr3/image.png",
               "http://s11.postimg.org/g08uq1na7/image.png",
               "http://s11.postimg.org/hgkd86q73/image.png",
               "http://s11.postimg.org/5fyx7gisf/image.png",
               "http://s11.postimg.org/3pfw5z19b/image.png");
$(document).click(function(e){

    imgc = -1;

    $('#ball').show().css({left:e.pageX +'px',top:e.pageY+'px'});

    setImage();


});

function setImage() {

    imgc++;

    var newimage = images[imgc];

    if (imgc < 5)  {
    $('#ball').fadeOut(50).css("background-image", "url("+newimage+")").fadeIn(50);

    setTimeout(setImage, 100);
    }
}

JSFiddle

Note that I replaced animate() with fadeIn() and fadeOut() .