jQuery ajax，一直等待，直到动画完成。

HTML & CSS:

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:

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

The problem is, error function starts, before animation in beforeSend function finishes.

问题是，在前面函数的动画完成之前，错误函数就开始了。

Here is working example http://jsfiddle.net/H4Jtk/2/

下面是工作示例http://jsfiddle.net/H4Jtk/2/

error should begin to work only when beforeSend is finished. How to do this?

只有当上述结束时，错误才会开始工作。如何做到这一点呢?

I use beforeSend function to start animation of the blocks when ajax starts. I can't remove it.

当ajax启动时，我使用be函数来启动块动画。我不能删除它。

Thanks.

谢谢。

3 个解决方案

#1

You can use a custom event to wait until the animation is complete, like this:

您可以使用自定义事件来等待动画完成，如下所示:

$("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
});

Notes:

注:

1. jQuery.one() attaches an event handler that fires once and is then removed.
2. one()附加一个事件处理程序，该处理程序触发一次，然后删除。
3. jQuery.is(':animated') is a custom selector provided by jQuery to determine if an element is animated using jQuery's built-in animation methods (eg fadeIn).
4. jQuery.is(':animated')是jQuery提供的一个自定义选择器，用于确定一个元素是否使用jQuery内置的动画方法(如fadeIn)动画。

New jsFiddle: http://jsfiddle.net/pgjHx/

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

---

In the comments, Happy has asked how to handle multiple animations. One way would be to add a condition to the animationComplete event handler to see if animation is ongoing. For example:

在评论中，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
});

#2

you can do this

你可以这样做

//run your animation on link click, and when animation gets completed, // then start your ajax request.

//单击链接运行动画，动画完成后，//然后启动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
            });
    });
});

#3

The thing is that "beforeSend" is finished - it will exit long before that "fadeIn" finishes. I don't know what you're trying to accomplish so it's hard to offer a solution. You'd have to wait to start the ajax operation until after the animation sequence (the "fadeIn") completes if you wanted to guarantee that to happen first.

问题是“预言”已经完成——它将在“法丁”完成之前很久退出。我不知道你想要完成什么，所以很难给出一个解决方案。如果您希望确保动画序列(“fadeIn”)完成之后，才会开始ajax操作。