Problemas con la eliminación de elementos en jQuery

Estoy intentando eliminar un objeto de una página con jQuery. También quiero animar la eliminación. El objetivo es hacer que el elemento se desvanezca(), esperar un segundo y luego eliminar(). Pero parece negarse a esperar para eliminar el elemento, incluso cuando lo uso en una función setTimeout(). ¿Cómo puedo hacer que un elemento se desvanezca() y luego eliminarlo()?

$("button").click(function() {
    $(this).fadeOut();
    setTimeout(function() { $(this).remove();}, 1000);
});

preguntado el 22 de mayo de 12 a las 15:05

5 Respuestas

Lea el manual cuidadosamente: http://api.jquery.com/fadeOut/

El método fadeOut() tiene una devolución de llamada que se invoca después de que se completa el fadeOut. Para usarlo:

$("button").click(function() {
    $(this).fadeOut(function() { $(this).remove();});
});

No debería haber ninguna razón para esperar un segundo después de que se complete el desvanecimiento, antes de eliminar el elemento, porque el elemento será invisible cuando se elimine.

contestado el 22 de mayo de 12 a las 16:05

En su función de tiempo de espera, this no es lo que crees que es - en realidad es el global window objeto.

En cualquier caso (sin juego de palabras), debe usar una "devolución de llamada de finalización":

$("button").click(function() {
    $(this).fadeOut('slow', function() {
        $(this).remove();
    });
});

Nunca, nunca, mezcles setTimeout y la cola de animación. esta bien intercalar los dos, es decir, hacer que una devolución de llamada de finalización inicie un temporizador, o tener un temporizador que inicie una animación, pero nunca está bien asumir que puede iniciar una animación de 1000 ms y un temporizador de 1000 ms y hacer que se completen al mismo tiempo.

EDITAR código fijo - no es necesario self en una devolución de llamada de finalización, todavía estaba pensando en setTimeout y this cuando escribi eso!

contestado el 22 de mayo de 12 a las 15:05

en un parche de setTimeout controlador es el global window objeto, AFAIK. - Alnitak

lo siento, ¿qué es AFAIK? Lo estoy interpretando como "una falsificación". - jcrowley

$('button').click(function(){
    $(this).fadeOut(function(){$(this).remove()});
});​

DEMO

contestado el 22 de mayo de 12 a las 15:05

¿Por qué no simplemente usar la devolución de llamada de desvanecimiento?

$("button").click(function() {
    $(this).fadeOut(function(){$(this).remove();});
});

contestado el 22 de mayo de 12 a las 15:05

prueba este, tal vez te ayude:

$("button").click(function() {
    (function(that) {
        that.fadeOut();
        setTimeout(function() {
            that.remove();
        }, 1000);
    })($(this));
});

contestado el 22 de mayo de 12 a las 16:05

eso = $(esto); sirve para almacenar la variable $(esto), y puede usar 'eso' más adelante en setTimeout - Ikrom

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