jQuery的阿賈克斯，等到beforeSend動畫完成

Question

HTML CSS &：

<a href="#">link</a> 
<img src="http://2.bp.blogspot.com/_OIHTbzY7a8I/TOaiTKLqszI/AAAAAAAAAHM/eb3iiOqxzKg/s640/Auto_Audi_Audi_concept_car_005130_.jpg" /> 
<div></div> 

img { display: none; } 
a { display: block; } 

JS：

$("a").click(function(){ 
    $.ajax({ 
     url: "test.php", 
     contentType: "html", 
     beforeSend: function(){ 
      $("img").fadeIn(600, function(){ 
       $("div").append(" | beforeSend finished | "); 
      }); 
     }, 
     error: function(){ 
      $("div").append(" | error | "); 
     } 
    }); 
    return false 
}); 

的問題是，error功能啓動，動畫之前在beforeSend功能完成。

這裏是工作示例http://jsfiddle.net/H4Jtk/2/

error應該開始只有當beforeSend完成工作。 如何做到這一點？

我使用beforeSend函數在ajax啓動時啓動塊的動畫。我無法刪除它。

謝謝。

Answer 1

您可以使用自定義事件要等到動畫完成，像這樣：

$("a").click(function(){ 
    var img = $("img"), 
     div = $("div"); 
    $.ajax({ 
     url: "test.php", 
     contentType: "html", 
     beforeSend: function(){ 
      img.fadeIn(600, function(){ 
       div.append(" | beforeSend finished | "); 
       div.trigger("animationComplete"); 
      }); 
     }, 
     error: function(){ 
      if(img.is(':animated')) { 
       div.one("animationComplete", function() { 
        div.append(" | error | "); 
       }); 
      } else { 
       div.append(" | error | "); 
      } 
     } 
    }); 
    return false 
}); 

注：

1. jQuery.one()附加一個事件處理程序，觸發一次，然後刪除。
2. jQuery.is(':animated')是由jQuery提供的自定義選擇器，用於確定是否使用jQuery的內置動畫方法（例如fadeIn）爲元素設置動畫效果。

新的jsfiddle：http://jsfiddle.net/pgjHx/

---

在評論，快樂已要求如何處理多個動畫。一種方法是將條件添加到animationComplete事件處理程序中以查看動畫是否正在進行。例如：

$("a").click(function(){ 
    var img = $("img"), 
     div = $("div"); 

    $.ajax({ 
     url: "test.php", 
     contentType: "html", 
     beforeSend: function(){ 
      img.fadeIn(600, function(){ 
       div.append(" | beforeSend finished | "); 
       div.trigger("animationComplete"); 
      }); 

      // Add another animation just to demonstrate waiting for more than one animation 
      img.animate({ 
       marginTop: '-=5', 
       opacity: '-=.5' 
      }, 700, function() {  
       div.trigger("animationComplete"); 
      }); 
     }, 
     error: function(){ 
      if(img.is(":animated")) { 
       // Note I've switched to bind, because it shouldn't be unbound 
       // until all animations complete 
       div.bind("animationComplete", function() { 
        if(img.is(":animated")) { 
         return; 
        } 
        div.append(" | error | "); 
        div.unbind("animationComplete"); 
       }); 
      } else { 
       div.append(" | error | "); 
      } 
     } 
    }); 
    return false 
}); 

Answer 2

事情是「beforeSend」是完成 - 它會在「fadeIn」完成之前很久退出。我不知道你在做什麼，所以很難提供解決方案。如果您想確保首先發生，您必須等待啓動ajax操作，直到後動畫序列（「fadeIn」）完成。

Answer 3

你可以做到這一點

//運行您的鏈接點擊動畫和動畫時得到完成， //然後啓動Ajax請求。

$("a").click(function() { 
    $("img").fadeIn(600, function() { 
     $("div").append(" | beforeSend finished | "); 
     $.ajax({ 
        url: "test.php", 
        contentType: "html", 
        error: function() { 
         $("div").append(" | error | "); 
        } 
       }); 
       return false 
      }); 
    }); 
});