jQuery ajax, дождитесь окончания отправки анимации

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/

---

В комментариях 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" завершено - он завершится задолго до того, как завершится "fadeIn". Я не знаю, чего вы пытаетесь достичь, поэтому трудно предложить решение. Вам нужно будет подождать, чтобы запустить операцию ajax, пока после последовательности анимации ("fadeIn") не завершится, если вы хотите гарантировать, что это произойдет первым.