淡出时不会发生Html内容更新

时间:2011-11-23 13:01:43

标签: jquery html

我有一个div作为窗帘定位在某些flash图表上,当这些图表更改其源数据文件更改时如果他们发现问题他们将返回错误(问题主要是当源数据文件没有'存在)。窗帘div显示带有动画gif的“加载”标签,并在所有图表更新时淡出。

我已设法控制所有这些并且还通过使用jQuery html()函数更改html内容时实现了错误消息。这工作正常,并且在我设置的某个时间内显示错误消息,之后我更改了其内容。

问题是当我尝试重新加载我知道存在的新数据并且窗帘再次定位在图表上时。它的内容仍然是错误信息,而不是'loading'标签和gif。这仅在数据文件第一次更改时发生。在第二个它正常工作。我已经通过html()更改了append()功能,并且在没有运气的情况下添加了对empty()的调用,仍然存在同样的问题。

我包含一些代码:

if(error){
    $('#curtain').empty().append('<div class="errorDiv"><img src="error.png"/><span class="errorTag">Data not available</span></div>');
$('#curtain').fadeOut(1000,function(){
    $('#curtain').empty().append('<div id="loadingTagDiv"><img src="loader.gif"/><span id="loadingTag">Loading...</span></div>');   
});
}

任何人都知道发生了什么?

---- EDIT -------------------------
我总结一下我想要的东西:

  1. 在使用'loading ...'标记加载新数据时,在图表上显示(淡入)窗帘div。
  2. 如果发生错误,modifiy curtain div的内容将显示错误消息。如果没有,只需转到第4点,无需修改内容,因为它将是默认值。
  3. 等待一段时间让用户看到错误。
  4. 使用淡出隐藏div。
  5. 将div的内容修改为默认的“loading ...”标记,以便在用户想要加载的新数据文件时准备好显示。
  6. 到目前为止,我已经实现了第四点的管理,而且五人差不多完成了。问题是加载新数据文件后出现错误后,内容未正确更新。

1 个答案:

答案 0 :(得分:0)

你不应该在fadeOut的回调中进行加载。

更像是

$('#curtain').empty().append('<div id="loadingTagDiv"><img src="loader.gif"/><span id="loadingTag">Loading...</span></div>');
$('#curtain').fadeOut(1000);

fadeOut完成

之后触发回调