javascript - 当 jQuery ajax 在 js 函数内调用时，动画在 IE 中不起作用

Question

当通过 javascript 调用单击按钮时，我试图显示一个带有 gif 动画的 div。但问题是，它只在 Firefox 中工作正常。在 IE 和 Chrome 中，动画不会显示。我尝试使用alert("stop");进行调试动画之前和之后，它确实有效，但是在我删除警报之后，它就不再有效了。请问有什么建议吗？

这是 TestPage.aspx 的代码片段:

<div id="animationDiv" style="display: none;">
    <img src="loading.gif" />
</div>
...
<div>
    <asp:Button ID="testButton" runat="server" Text="Test AJAX" OnClientClick="return testButtonClick();" />
</div>
...
<script type="text/javascript">
<!--
    var docWidth, docHeight;

    function testButtonClick() {
        var o_animationDiv = $("#animationDiv");

        o_animationDiv.width(docWidth);
        o_animationDiv.height(docHeight);
        o_animationDiv.show();

        $.ajax({
            type: "Post",
            url: "TestPage.aspx/TestAjax",
            async: false,
            cache: false,
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: testAjaxSuccess,
            error: testAjaxError
        });

        function testAjaxSuccess(data, status, xhr) {
            // do something here
        };

        function testAjaxError(xhr, status, error) {
            // do something here
        };

        o_animationDiv.hide();

        return false;
    };

    $(document).ready(function () {
        docWidth = $(document).width();
        docHeight = $(document).height();
    });
//-->
</script>

这是 TestPage.aspx.cs 的代码片段:

// using PageMethod for ajax
[System.Web.Services.WebMethod(EnableSession = true)]
public static string TestAjax()
{
    System.Threading.Thread.Sleep(5000); // 5 seconds

    // or do something else here
    // ie. if validation error, throw an exception

    return string.Empty;
}

更新1:添加了一些javascript函数

Answer 1

为什么不在发布成功时调用.hide():

$.ajax({
  type  : "Post",
  url   : "TestPage.aspx/TestAjax",
  cache : false,
  data  : "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(data) {

    // hide element when POST return as arrived,
    // meaning the "5 seconds" period has ended!
    o_animationDiv.hide();

  }
});

您可以在 jQuery documentation 阅读有关回调函数的信息。 !