Comment supprimer lentement un élément avec jQuery?

179

$target.remove() peut supprimer l'élément, mais maintenant je veux que le processus se termine avec une animation de sensation, comment le faire?

javascript jquery Masque
la source

Réponses:

355 
$target.hide('slow');

ou

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

pour exécuter l'animation, puis supprimez-la du DOM

Greg
la source
7
La méthode .remove () supprime très spécifiquement le nœud du DOM. La méthode .hide () modifie uniquement l'attribut d'affichage pour qu'il ne soit pas visible, mais qu'il existe toujours.
micahwittman
2
@Envil L'affiche a demandé comment l'enlever lentement. .remove () le fait immédiatement.
pixelearth
4
@pixelearth a mis $(this).remove()dans la fonction de rappel. Cela fonctionne mieux que$target.remove()
Envil
20

Si vous devez masquer puis supprimer l'élément, utilisez la méthode remove dans la fonction de rappel de la méthode hide.

Cela devrait fonctionner

$target.hide("slow", function(){ $(this).remove(); })
rahul
la source
+1 pour avoir la bonne réponse comme les commentaires ci-dessus l'ont compris. D'une certaine manière, j'aime le $(this)plutôt que de le répéter $targetaussi.
revoir
c'est exactement ce que je voulais après avoir essayé la réponse acceptée, ça a l'air beaucoup plus fluide :)
Catalin Hoha
17 
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
Zohaib
la source
11

Toutes les réponses sont bonnes, mais j'ai trouvé qu'elles manquaient toutes de ce "poli" professionnel.

Je suis venu avec ceci, disparaissant, glissant vers le haut, puis supprimant:

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

Je suis un peu en retard à la fête, mais pour tous ceux comme moi qui sont issus d'une recherche Google et n'ont pas trouvé la bonne réponse. Ne vous méprenez pas, il y a de bonnes réponses ici, mais pas exactement ce que je cherchais, sans plus tarder, voici ce que j'ai fait:

$(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>
Développer l'extrait

chebaby
la source
Indique certainement ici pour sa belle apparence. :-)
SharpC
0

J'ai modifié la réponse de Greg en fonction de mon cas, et cela fonctionne. C'est ici:

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

Tu veux dire comme 

$target.hide('slow')

?

Jeremy Morgan
la source
1
Oui, mais je dois également le supprimer après l'animation.
Masque