用JQuery替换另一个div

Question

<div id="calculateButton" style="cursor: pointer;">
    <img src="<%= VirtualPathUtility.ToAbsolute("~/img/chic/btn_calculate.gif")%>" />
</div>
<div id="calculateInProgress" style="text-align: left;">
    <br />
    Calculating...<img height='15px' src="<%= VirtualPathUtility.ToAbsolute("~/img/CreatingReport.gif")%>" />
</div>

所以我上面有这两个div。基本上现在发生的是用户单击计算按钮，并显示它的div undernath，这基本上是一个动画gif，显示用户正在计算。我们INSTEAD希望gif代替按钮，然后当它完成时，将按钮带回来。以下是我们现在使用的代码EXTRA div，而不是我们想要的方式：

$('#calculateInProgress').show();
$('#calculateInProgress').hide();

点击它时调用show，执行一些操作，完成后自动调用hide。

如何更改此选项以执行我想要的操作？

Answer 1

使用.html（）方法用gif替换内容，然后再返回

Answer 2

// Before calculation
$('#calculateButton').hide();
$('#calculateInProgress').show();

// In the Ajax callback
$('#calculateButton').show();
$('#calculateInProgress').hide();