Question

其实我要用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=""/>

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

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

请帮助。

Answer 1

我认为您的问题更多与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);
  });
}

Answer 2

在循环中使用回调并将变量传递给循环内部更新的变量。因此，当回调调用它时，更新的变量将使用所有回调的最后一个状态！有关更多信息，请参阅此主题：在javascript中使用循环内部的回调时，是否有任何方法可以保存在循环中更新的变量以用于回调？

JQuery问题中的图像替换

2 个答案: