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

El problema es, error función comienza, antes de animación en beforeSend función de los acabados.

Aquí es ejemplo de trabajo http://jsfiddle.net/H4Jtk/2/

error debería empezar a funcionar sólo cuando beforeSend está terminado. Cómo hacerlo?

Yo uso beforeSend función para iniciar la animación de los bloques cuando ajax se inicia. Yo no puedo quitarlo.

Gracias.

InformationsquelleAutor James | 2011-03-06

3 Comentarios

  1. 10

    Puede utilizar un evento personalizado que esperar hasta que se complete la animación, como este:

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

    Notas:

    1. jQuery.one() conecta un controlador de eventos que se dispara una vez y luego se retira.
    2. jQuery.is(':animated') es un selector personalizado proporcionado por jQuery para determinar si un elemento está animado con jQuery incorporada en la animación de los métodos (por ejemplo,fadeIn).

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


    En los comentarios, Feliz ha preguntado cómo manejar varias animaciones. Una forma sería la de añadir una condición a la animationComplete controlador de eventos para ver si la animación está en curso. Por ejemplo:

    $("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
    });
    • Me gustaría usarlo sin es (animación) jsfiddle.net/H4Jtk/4 funciona bien
    • +1 es (‘animación’), podría decir donde puedo encontrar más información sobre este evento «animationComplete’, sólo busqué en google pero no encontrar nada útil.
    • usted podría cola de los eventos (ver las opciones de la cola en api.jquery.com/animate) y, a continuación, activar la ‘animationComplete evento en la última animación, o usted podría mantener algún tipo de un contador de activa las animaciones (por ejemplo, agregar var animationCount = 0 a la parte superior del controlador de eventos click, a continuación, añadir animationCount++ encima de cada llamada a una animación, a continuación, añadir animationCount--; if(animationCount > 0) return para el comienzo de la animationComplete controlador).
    • Yo soy sólo la creación de un controlador de eventos personalizado y un nombre de evento personalizado; no hay ningún nativo animationComplete evento en el DOM o en jQuery, que solo tienes que elegir que como un nombre descriptivo.
    • u eres un rockstar!
    • He reconsiderado mi comentario discutiendo varias animaciones y creo que me he metido más complicada de lo necesario. Voy a editar mi respuesta para darle un poco más de detalle de la solución más sencilla.
    • oh que tiene usted, usted es el desencadenamiento de ese evento cuando la animación completa. Pensé que su un sistema de eventos de jQuery.
    • la gente debería darle más +++
    • por favor, ver mi edición, por debajo de la horizontal de la regla, para la gestión de múltiples animaciones. También de la nota, en la producción que había presumiblemente desea utilizar menos amplia de selectores que img y div, estoy seguro de que esto es sólo para esta prueba aislada caso, sí?
    • me puedes dar más + por «aceptar», mi respuesta haciendo clic en la marca de verificación junto a él.
    • usted es cierto. Total de gracias.
    • saludos!

  2. 1

    usted puede hacer esto

    //ejecutar la animación en el enlace haga clic en, y cuando la animación se completó,
    //a continuación, iniciar la petición 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
                });
        });
    });
    • esta no es una solución
    • esta solución retrasos en el XHR solicitud por 600ms, que es un retraso notable. Puedo ver por qué Feliz no quiero hacer esto.
  3. -1

    La cosa es que «beforeSend» es terminado – le va a salir mucho antes de que «fadeIn», concluye. No sé lo que usted está tratando de lograr, por lo que es difícil ofrecer una solución. Usted tendría que esperar para iniciar la operación de ajax hasta después de la secuencia de animación (el «fadeIn») completa si se quería garantizar que suceda primero.

    • Yo uso beforeSend función para iniciar la animación de los bloques cuando ajax se inicia. Cuando la animación está terminado, voy a mostrar mensaje de error en los datos de éxito hacia atrás a través de la animación. Ahora su más clara?
    • Feliz está tratando de lograr: 1. el XHR llamar a disparar de inmediato; 2. el beforeSend controlador de cuidar de las acciones que tienen lugar al comienzo de la XHR solicitud; y 3. el error evento de espera para la beforeSend acciones para completar antes de realizar DOM cambios de orden. Esto se puede lograr con eventos personalizados, sin retrasar el XHR solicitud, por mi respuesta.

Dejar respuesta

Please enter your comment!
Please enter your name here