動畫不工作在IE瀏覽器時，jQuery函數內調用js函數

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

jQuery的AJAX是異步，這樣就不會等待ajax結果再次隱藏。

o_animationDiv.hide(); 
o_animationDiv.show(); 

此行以串行方式工作，您不能看到它是否正常工作。所以，你應該等待AJAX​​結果隱藏it.Try此，

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

UPDATE：

對不起，我錯過了你創建一個同步Ajax請求的地步。 但是有一個問題。運行同步XHR時，大多數瀏覽器會自行鎖定。這也會影響以前的進程。

• Here is a similar question

也許如果你使用beforeSend，就可以避免這個問題。

beforeSend

A pre-request callback function that can be used to modify the jqXHR 
(in jQuery 1.4.x, XMLHTTPRequest) object before it is sent 

試試這個，

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

更新2：

如果不行，試試這個，

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

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

Answer 2

你爲什麼不叫.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瞭解回調函數！