jQuery animar en bucle infinito

Estoy tratando de hacer que esto suceda:

  1. evitar que un botón de envío envíe el formulario

  2. desvanecer un elemento

  3. luego enviando el formulario

¡Pero estoy atascado con un bucle infinito de animación! ¿¿Por qué??

HTML

<form id="postitron" method="post" action="/es/postitron/answertron.php">
  <input type="hidden" name="acces" value"yes">
  <input id="submit" type="submit" value="DOIT">
</form>

JavaScript

$('#postitron').submit(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

PD- También he probado el .one() método en lugar de .submit(), pero evita que el método de envío se ejecute en #postitron una vez que se completa la animación :(

preguntado el 23 de mayo de 12 a las 07:05

3 Respuestas

Es porque está vinculando su evento en SUBMIT, Y su .animate callback function is SUBMIT'ing la forma... causando el bucle infinito.

Pruebe lo siguiente:

En lugar de evento vinculante .submit on formenlazar .click evento en submit del botón.

$('#submit').click(function(e){
    e.preventDefault();
    $('#page').animate({opacity:0},400, function(){
        $('#postitron').submit();
    });
});

Tenga en cuenta que no probé esto.

contestado el 23 de mayo de 12 a las 07:05

Si golpeas <enter> dentro de un cuadro de entrada en el formulario, el formulario se enviaría sin la animación. - roberto

Buen pensamiento, pero está devolviendo un error en la consola: TypeError no detectado: propiedad 'enviar' del objeto # no es una función - tecno campesino

Editado para notar que el clic está en el botón de enviar, no en el formulario. - roberto

submit() llama a su límite personalizado submit función, que a su vez llama a su submit de nuevo, etc.

Intenta usar el envío de DOM:

$('#postitron')[0].submit()

contestado el 23 de mayo de 12 a las 07:05

ah.. logico. ahora la animación se completa, pero el formulario no se publica (debería ser 404 en mi prueba). ¿Alguna idea? - tecno campesino

hhm, ¿cómo sabes que no se está enviando? ¿Consola? - Andreas Wang

Sí señor: TypeError no detectado: propiedad 'enviar' del objeto # no es una función - tecno campesino

@technopeasant la bola de cristal me dice que tienes, en algún lugar de tu forma, un elemento de forma con name="submit", ahora lo haces? - Andreas Wang

no señor, estoy usando el código anterior. Tengo un elemento cuya identificación y tipo están configurados para enviar: tecno campesino

Puede predefinir la función y, dentro de ella, desvincular para enviar y luego volver a enviar. Es un truco, pero puede funcionar.

O tal vez verifique que esté oculto y luego vuelva a enviarlo así:

var hidden = false;
$('#postitron').submit(function(e){
    if ( !hidden ) {
        e.preventDefault();
        $('#page').animate({opacity:0},400, function(){
            hidden = true;
            $('#postitron').submit();
        });
    }
});

contestado el 23 de mayo de 12 a las 07:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.