Javascript Jquery创建动画，在div中交换一系列图像

我正在尝试创建一种效果，在用户单击页面的任何位置，我都会显示一个简短的动画。为此，我需要将div的背景图像与图像数组快速交换一次。我找不到一种在jquery中使用

animate（）

或

fadeOut（）

方法来实现这一点的方法，所以我尝试了

setTimeout（）

，但都是徒劳的。请指导我做什么最好的技术，我正在努力

附言：我在帖子中包含JSFIDLE链接时遇到了问题，所以我会把它留给其他人来编辑。尽管对此进行解释会有很大帮助。

这应该可以：

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

var-imgc；
变量图像=数组（“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");
$（文档）。单击（函数（e）{
imgc=-1；
$（'#ball'）.show（）.css（{左：e.pageX+'px'，右：e.pageY+'px'}）；
setImage（）；
});
函数setImage（）{
imgc++；
var newimage=images[imgc]；
if（imgc<5）{
$（'#ball'）.fadeOut（50）.css（“背景图像”，“url”（“+newimage+”）））.fadeIn（50）；
设置超时（设置映像，100）；
}
}

---

请注意，我将

animate（）

替换为

fadeIn（）

和

fadeOut（）

您尝试过使用动画gif吗？我不想使用动画gif，因为它具有图像质量。我实际上是在每次单击时都尝试创建一个新的动画。也就是说，每次单击页面时，它都会自动按顺序显示1-2-3-4-5，然后在5时停止。@ishan我修改了我的答案和JSFIDLE。现在正在与动画合作。嗨，亚尼，谢谢你的回答。它工作得很好。虽然我想知道你是否能帮我一点忙，告诉我修改哪些值来阻止图像在传输过程中闪烁。我正在尝试创建一个动画，在一个序列中有几个图像，现在有很多闪烁。@ishan我只能给你指出正确的方向。你得到闪烁，因为你是第一次淡出，然后淡入。所以在两者之间有一个死区。有3件事你可以做-（1）添加一个内部div到“ball”并将其图像设置为下一个图像，然后在第二个图像中淡出第一个图像的同时淡出第一个图像。（2） 编写两幅图像之间的交叉jquery交叉淡入淡出（3）使用第三方库为您处理交叉淡入淡出效果，例如。这个特定库的好处是，它还可以循环浏览多个图像，因此您可以加载所有5个图像，并在每次单击时循环浏览它们。