¿Cómo eliminar un elemento lentamente con jQuery?

179

$target.remove() puedo eliminar el elemento, pero ahora quiero que el proceso esté inactivo con alguna animación de sensación, ¿cómo hacerlo?

javascript jquery Máscara
fuente

Respuestas:

355 
$target.hide('slow');

o

$target.hide('slow', function(){ $target.remove(); });

para ejecutar la animación, luego quítela del DOM

Greg
fuente
77
El método .remove () elimina muy específicamente el nodo del DOM. El método .hide () solo cambia el atributo de visualización para que no sea visible, pero aún existe.
micahwittman
2
@Envil El póster preguntó cómo eliminarlo lentamente. .remove () lo hace de inmediato.
pixelearth
44
@pixelearth puesto $(this).remove()dentro de la función de devolución de llamada. Eso funciona mejor que$target.remove()
Envil
20

Si necesita ocultar y luego eliminar el elemento, use el método remove dentro de la función de devolución de llamada del método hide.

Esto debería funcionar

$target.hide("slow", function(){ $(this).remove(); })
rahul
fuente
+1 por tener la respuesta correcta, ya que los comentarios anteriores lo obtuvieron. De alguna manera me gusta el en $(this)lugar de repetir el $targettambién.
goodeye
esto es exactamente lo que quería después de probar la respuesta aceptada, se ve mucho más suave :)
Catalin Hoha
17 
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
zohaib
fuente
11

Todas las respuestas son buenas, pero descubrí que a todos les faltaba ese "pulido" profesional.

Se me ocurrió esto, desvaneciéndome, deslizándome hacia arriba y luego quitando:

$target.fadeTo(1000, 0.01, function(){ 
    $(this).slideUp(150, function() {
        $(this).remove(); 
    }); 
});
SharpC
fuente
3

Llego un poco tarde a la fiesta, pero para alguien como yo que vino de una búsqueda en Google y no encontró la respuesta correcta. No me malinterpreten, hay buenas respuestas aquí, pero no exactamente lo que estaba buscando, sin más preámbulos, esto es lo que hice:

$(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-4.css
 */

.removed-item {
    -webkit-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    -o-animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards;
    animation: removed-item-animation .6s cubic-bezier(.55,-0.04,.91,.94) forwards
}

@keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-webkit-keyframes removed-item-animation {
    from {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}

@-o-keyframes removed-item-animation {
    from {
        opacity: 1;
        -o-transform: scale(1);
        transform: scale(1)
    }

    to {
        -o-transform: scale(0);
        transform: scale(0);
        opacity: 0
    }
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
</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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


</body>
</html>
Expandir fragmento

chebaby
fuente
Definitivamente apunta aquí para que se vea genial. :-)
SharpC
0

Modifiqué la respuesta de Greg para adaptarme a mi caso, y funciona. Aquí está:

$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
nadula
fuente
-4

Te refieres a 

$target.hide('slow')

?

Jeremy Morgan
fuente
1
Sí, pero también necesito eliminarlo después de la animación.
Máscara