¿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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.