Wie entferne ich ein Element langsam mit jQuery?

178

$target.remove() kann das Element entfernen, aber jetzt möchte ich, dass der Prozess mit einer Gefühlsanimation beendet wird. Wie geht das?

Maske
quelle

Antworten:

354
$target.hide('slow');

oder

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

Um die Animation auszuführen, entfernen Sie sie aus dem DOM

Greg
quelle
7
Die .remove () -Methode entfernt den Knoten sehr spezifisch aus dem DOM. Die .hide () -Methode ändert nur das Anzeigeattribut, das erstellt werden soll. Es ist nicht sichtbar, aber noch vorhanden.
Micahwittman
2
@Envil Das Poster fragte, wie man es langsam entfernt. .remove () macht es sofort.
Pixelearth
4
@pixelearth $(this).remove()in die Rückruffunktion eingefügt . Das funktioniert besser als$target.remove()
Envil
19

Wenn Sie das Element ausblenden und dann entfernen müssen, verwenden Sie die Methode remove in der Rückruffunktion der Methode hide.

Das sollte funktionieren

$target.hide("slow", function(){ $(this).remove(); })
rahul
quelle
+1 für die richtige Antwort, wie in den obigen Kommentaren angegeben. Irgendwie mag ich das, $(this)anstatt das auch $targetzu wiederholen .
Goodeye
Dies ist genau das, was ich wollte, nachdem ich die akzeptierte Antwort ausprobiert hatte, es sieht viel glatter aus :)
Catalin Hoha
17
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
Zohaib
quelle
11

Alle Antworten sind gut, aber ich fand, dass allen diese professionelle "Politur" fehlte.

Ich habe mir das ausgedacht, ausgeblendet, nach oben gerutscht und dann entfernt:

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

Ich bin etwas spät zur Party, aber für jemanden wie mich, der von einer Google-Suche stammt und nicht die richtige Antwort gefunden hat. Versteh mich nicht falsch, hier gibt es gute Antworten, aber nicht genau das, wonach ich gesucht habe, ohne weiteres, hier ist was ich getan habe:

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

Chebaby
quelle
Auf jeden Fall Punkte hier dafür, dass es toll aussieht. :-)
SharpC vor
0

Ich habe Gregs Antwort an meinen Fall angepasst und es funktioniert. Hier ist es:

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

Du meinst wie

$target.hide('slow')

?

Jeremy Morgan
quelle
1
Ja, aber ich muss es auch nach der Animation löschen.
Maske