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
});

问题是,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
});