¿Cómo "fadeOut" y "eliminar" un div en jQuery?

233

Estoy tratando de dar un efecto de desvanecimiento a un div y eliminar ese div (id = "notificación"), cuando se hace clic en una imagen.

Así es como estoy haciendo eso:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

Esto parece no estar funcionando. ¿Qué necesito hacer para arreglar esto?

javascript jquery RSilva
fuente
14
15 votos por la pregunta y 55 votos por la respuesta ... y claramente fue solo un error ... ¿Qué?
Ivan Castellanos
44
Ahora tiene 34 y 110 :). Aterricé aquí porque no sabía cómo eliminar un elemento DESPUÉS de que se desvaneció (puede adivinar: no hice RTFM).
orique
44
Independientemente del error tipográfico, la pregunta aparece en los resultados de Google y voto cuando encuentro las respuestas rápidamente.
Valamas

Respuestas:

440

Prueba esto:

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

Creo que sus comillas dobles en torno a la onclickestaban haciendo que no funcionara. :)

EDITAR : Como se señala a continuación, javascript en línea es malo y probablemente debería sacar esto de la onclicky moverlo al click()controlador de eventos de jQuery . Así es como lo hacen los niños geniales hoy en día.

Paolo Bergantino
fuente
24
No debe usar JavaScript en línea, porque hace que sea difícil cambiarlo de manera consistente.
Nick Berardi
14
No lo apruebo, solo estoy ayudando al chico con su problema. A veces predico, me acabo de despertar y no estoy de humor para "millas extra". Sin embargo, tu publicación hace el trabajo. :)
Paolo Bergantino
¿Podría explicar cómo el controlador onclick es malo? ¿Es solo por mantenimiento o hay una razón técnica?
panzi
2
¿Realmente vale la pena un archivo separado cada vez que desea una línea de JavaScript en una página? Creo que en línea tiene su lugar.
Casey
91

realmente deberías intentar usar jQuery en un archivo separado, no en línea. Esto es lo que necesita:

<a class="notificationClose "><img src="close.png"/></a>

Y luego esto en la parte inferior de su página en <script>etiquetas por lo menos o en un archivo externo de JavaScript.

$(".notificationClose").click(function() {
    $("#notification").fadeOut("normal", function() {
        $(this).remove();
    });
});
Nick Berardi
fuente
Intenté esto pero no pude hacerlo funcionar. El enlace en línea anterior funcionó, y los dos son prácticamente idénticos. Aquí está ... jsfiddle.net/AndyMP/DBrf5
Andy
1
@Andy: en primer lugar, olvidó configurar la biblioteca en jQuery;) En segundo lugar, si la usa en su sitio, también debe envolverla $(document).ready(function() {y });. (en jsFiddle está cargado, así que lo hace por ti)
Nathan
@Nick Berardi, ¿podemos hacerlo con el desplazamiento de página abajo?
Supermodelo
55

Si lo está utilizando en varios lugares diferentes, debe convertirlo en un complemento.

jQuery.fn.fadeOutAndRemove = function(speed){
    $(this).fadeOut(speed,function(){
        $(this).remove();
    })
}

Y entonces:

// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
Sam Sehnert
fuente
Estaba mirando cómo hacer esto, y para mi propósito, la forma de "plugin" es mejor para mí, gracias
Harag
30

¿Has probado esto?

$("#notification").fadeOut(300, function(){ 
    $(this).remove();
});

Es decir, utilizando la corriente de este contexto para apuntar el elemento en el interior y no la función del ello. Uso este patrón todo el tiempo, debería funcionar.

Tamas Czinege
fuente
5

si eres como yo, viniendo de una búsqueda en google y buscando eliminar un elemento html con una animación genial, entonces esto podría ayudarte:

$(document).ready(function() {
    
    var $deleteButton = $('.deleteItem');

    $deleteButton.on('click', function(event) {
    
        event.preventDefault();

        var $button = $(this);

        if(confirm('Are you sure about this ?')) {

            var $item = $button.closest('tr.item');

            $item.addClass('removed-item')

                .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {

                    $(this).remove();
            });
        }
      
    });
    
});
/**
 * Credit to Sara Soueidan
 * @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);
    animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}

@keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        -ms-transform: translateX(-800px);
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-webkit-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -webkit-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -webkit-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}

@-o-keyframes removed-item-animation {
    0% {
        opacity: 1;
        -o-transform: translateX(0);
        transform: translateX(0)
    }

    30% {
        opacity: 1;
        -o-transform: translateX(50px);
        transform: translateX(50px)
    }

    80% {
        opacity: 1;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }

    100% {
        opacity: 0;
        -o-transform: translateX(-800px);
        transform: translateX(-800px)
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <table class="table table-striped table-bordered table-hover">
    <thead>
      <tr>
        <th>id</th>
        <th>firstname</th>
        <th>lastname</th>
        <th>@twitter</th>
        <th>action</th>
      </tr>
    </thead>
    <tbody>
      
      <tr class="item">
        <td>1</td>
        <td>Nour-Eddine</td>
        <td>ECH-CHEBABY</td>
        <th>@__chebaby</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>2</td>
        <td>John</td>
        <td>Doe</td>
        <th>@johndoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
      
      <tr class="item">
        <td>3</td>
        <td>Jane</td>
        <td>Doe</td>
        <th>@janedoe</th>
        <td><button class="btn btn-danger deleteItem">Delete</button></td>
      </tr>
    </tbody>
  </table>
  
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />


</body>
</html>
Expandir fragmento

chebaby
fuente
-1

.fadeOut ('lento', this.remove);

Alvar Vilu
fuente
-9

Utilizar 

.fadeOut(360).delay(400).remove();
andrewpolyakov
fuente
44
Esto no funciona, el removemétodo se llama inmediatamente después delfadeOut
Iulian Onofrei