Bagaimana cara menghapus elemen secara perlahan dengan jQuery?

179

$target.remove() dapat menghapus elemen, tetapi sekarang saya ingin proses untuk turun dengan beberapa merasa animasi, bagaimana cara melakukannya?

javascript jquery

— Topeng
sumber

355

$target.hide('slow');

atau

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

untuk menjalankan animasi, lalu hapus dari DOM

— Greg
sumber

7

Metode .remove () secara khusus menghapus node dari DOM. Metode .hide () hanya mengubah atribut tampilan menjadi tidak terlihat, tetapi masih ada.

— micahwittman

2

@Envil Poster bertanya bagaimana cara menghapusnya perlahan. .remove () segera melakukannya.

— pixelearth

4

@pixelearth dimasukkan $(this).remove()ke dalam fungsi callback. Itu bekerja lebih baik daripada$target.remove()

— Envil

98

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

atau

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

Duplikat: Bagaimana cara "fadeOut" & "menghapus" div di jQuery?

— micahwittman
sumber

20

Jika Anda perlu menyembunyikan dan kemudian menghapus elemen, gunakan metode hapus di dalam fungsi panggil balik metode sembunyikan.

Ini seharusnya bekerja

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

— rahul
sumber

+1 untuk mendapatkan jawaban yang benar karena komentar di atas mendapatkannya. Entah bagaimana saya suka yang $(this)diulang $targetjuga.

— selamat tinggal

ini adalah persis apa yang saya inginkan setelah saya mencoba jawaban yang diterima, itu terlihat jauh lebih halus :)

— Catalin Hoha

17

$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});

— zohaib
sumber

11

Semua jawaban baik, tetapi saya menemukan mereka semua tidak memiliki "semir" profesional.

Saya datang dengan ini, memudar, meluncur ke atas, lalu melepaskan:

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

— SharpC
sumber

3

Saya sedikit terlambat ke pesta, tetapi untuk orang seperti saya yang berasal dari pencarian Google dan tidak menemukan jawaban yang tepat. Jangan salah paham ada jawaban bagus di sini, tapi tidak persis apa yang saya cari, tanpa basa-basi lagi, inilah yang saya lakukan:

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

Luaskan cuplikan

— dingin
sumber

Poin di sini pasti untuk itu tampak hebat. :-)

— SharpC

0

Saya telah memodifikasi jawaban Greg agar sesuai dengan kasus saya, dan itu berhasil. Ini dia:

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

— nadula
sumber

-4

Maksudmu seperti

$target.hide('slow')

?

— Jeremy Morgan
sumber

1

Ya, tapi saya juga harus menghapusnya setelah animasi.

— Topeng