javascript - JQuery问题中的图像替换

实际上我将用jquery依次替换图像。我在jquery中有以下代码，但它总是将最后一张图像放置在图像源中。

for(var i = 0;i<2;++i)
{
  $("#heatMapImage").attr("src","");
  $("#heatMapImage").fadeOut(1000, function() {
  $("#heatMapImage").attr("src",i + ".png");
  }).fadeIn(9000);

  if(i == 2)
    $("#heatMapImage").attr("src",i + ".png");
}

我的html代码在下面。

<img id = "heatMapImage" src=""/>

当脚本运行时，它直接给我最后一张图像。inspect元素中的html看起来像这样，

<img id= "heatMapImage" src="2.png"/>

请帮忙。

最佳答案

我认为您的问题与javascript的异步性质有关。您正在循环内运行fadeOut和fadeIn函数，但是循环不知道在动画增加之前要等待动画完成。

而不是使用for循环，您应该将自己的fadeOut fadeIn代码移至一个函数中，并在您从fadeIn回调时以递归方式调用该函数。

var i = 0;

function fadeImages(i){
  $("#heatMapImage").attr("src","");
  $("#heatMapImage").fadeOut(1000, function() {
  $("#heatMapImage").attr("src",i + ".png");
  }).fadeIn(9000, function() {
      if (i < 2) fadeImages(i + 1);
  });
}