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?

javascript jquery

— Maske
quelle

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

97

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

oder

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

Duplizieren: Wie kann man ein Div in jQuery "fadeOut" und "entfernen"?

— Micahwittman
quelle

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>

Erweitern Sie das Snippet

— 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