jQuery的阿贾克斯，等到beforeSend动画完成 [英] jQuery ajax, wait until beforeSend animation finishes

问题描述

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

记者：

$("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 函数完成之前。

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

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

错误应开始只有当 beforeSend 完成工作。 如何做到这一点？

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

我用 beforeSend 函数来启动块的动画。我无法将其删除。

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

感谢。

推荐答案

您可以使用自定义事件要等到动画完成，像这样的：

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

注：

1. jQuery.one（）附加的事件处理程序触发一次，然后删除。
2. jQuery.is（：动画'）是jQuery的提供的自定义选择，以确定是否一个元素是用动画jQuery的内置的动画方法（如淡入）。

1. jQuery.one() attaches an event handler that fires once and is then removed.
2. 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).

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

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

在评论，快乐已要求如何处理多个动画。一种方法是将一个条件添加到 animationComplete 事件处理程序，以查看是否动画正在进行中。例如：

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:

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

这篇关于jQuery的阿贾克斯，等到beforeSend动画完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！