javascript - Jquery 创建动画，交换 div 中的一系列图像

Question

我正在尝试创建一种效果，在用户单击页面的任何位置都显示一个简短的动画。为此，我需要快速将 div 的背景图像与图像数组交换一次。我找不到仅使用 jquery 中的 animate() 或 fadeOut() 方法来做到这一点的方法，所以我尝试使用 setTimeout()，但一切都是徒劳。请指导我找到适合我想做的事情的最佳技术。

JSFiddle

P.S:我在帖子中包含 JSFiddle 链接时遇到问题，因此我会将其留给其他人进行编辑。尽管对此进行解释会有很大帮助。

Answer 1

这应该有效:

    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

请注意，我用 fadeIn() 和 fadeOut() 替换了 animate()。