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

Question

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

Ésta es la forma en que estoy haciendo que:

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

Esto parece no estar funcionando. ¿Qué debo hacer para solucionar esto?

Answer 1

Prueba esto:

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

Creo que su comillas dobles alrededor del onclick estaban haciendo no funciona. :)

EDITAR: Como se señala más adelante, en línea Javascript está mal y es probable que debe tomar esto de la onclick y moverlo a click() manejador de eventos de jQuery. Así es como los chicos geniales lo están haciendo hoy en día.

Answer 2

¿Has probado esto?

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

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

Answer 3

realmente debería tratar de usar jQuery en un archivo separado, no en línea. Aquí es lo que necesita:

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

Y entonces esta en la parte inferior de la página en <script> etiquetas como mínimo o en un archivo JavaScript externo.

$(".notificationClose").click(function() { 
    $("#notification").fadeOut("normal", function() { 
     $(this).remove(); 
    }); 
}); 

Answer 4

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 luego:

// Somewhere in the program code. 
$('div').fadeOutAndRemove('fast'); 

Answer 5

Uso

.fadeOut(360).delay(400).remove(); 

Answer 6

si usted es como yo que vienen de una búsqueda en Google y mirando para eliminar un elemento html con animación fresca, entonces esto podría ayuda:

$(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>