jQuery ajax，等到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
});

問題是，在beforeSend函數完成動畫之前， error函數開始。

這是工作示例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 ）進行動畫fadeIn 。

新jsFiddle： http ： //jsfiddle.net/pgjHx/

---

在評論中，Happy已經詢問如何處理多個動畫。 一種方法是向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

你可以這樣做

//在鏈接點擊時運行動畫，當動畫完成時，//然后啟動你的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
            });
    });
});

Answer 3

問題是，“beforeSend” 完成 -長則退出前的“淡入”結束。 我不知道你想要完成什么，所以很難提供解決方案。 你必須等待啟動AJAX操作，直到動畫序列（“淡入”） 后，如果你想保證先發生完成。