¿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

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

98

target.fadeOut(300, function(){ $(this).remove();});

o

$('#target_id').fadeOut(300, function(){ $(this).remove();});

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

— micahwittman
fuente

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