JQuery ile yavaş yavaş bir eleman nasıl kaldırılır?

179

$target.remove() öğeyi kaldırabilir, ancak şimdi sürecin biraz animasyonla düşmesini istiyorum, nasıl yapılır?

javascript jquery

— maskelemek
kaynak

355

$target.hide('slow');

veya

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

animasyonu çalıştırmak için DOM'dan kaldırın

— Greg
kaynak

7

.Remove () yöntemi, düğümü DOM'dan çok özel olarak kaldırır. .Hide () yöntemi yalnızca yapmak için display özniteliğini değiştirir görünür değil, ancak varlığını sürdürür.

— micahwittman

2

@Envil Poster yavaşça nasıl kaldırılacağını sordu. .remove () hemen yapar.

— pixelearth 15:17

4

@pikselearth $(this).remove(), geri arama işlevinin içine konur . Daha iyi çalışır$target.remove()

— Envil

98

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

veya

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

Yinelenen: jQuery bir div "fadeOut" & "kaldırmak" nasıl?

— micahwittman
kaynak

20

Öğeyi gizlemeniz ve sonra kaldırmanız gerekirse, hide yönteminin geri arama işlevinin içindeki remove yöntemini kullanın.

Bu çalışmalı

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

— rahul
kaynak

Yukarıdaki yorumlarda olduğu gibi cevabın doğru olması için +1. Her nasılsa ben de $(this)tekrarlamaktan hoşlanıyorum $target.

— goodeye

kabul edilen yanıtı denedikten sonra tam olarak istediğim şey bu, çok daha yumuşak görünüyor :)

— Catalin Hoha

17

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

— Zohaib
kaynak

11

Tüm cevaplar iyi, ama hepsi o profesyonel "lehçe" eksik bulundu.

Ben bu ile geldi, solma, yukarı kayma, sonra kaldırma:

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

— SharpC
kaynak

3

Partiye biraz geç kaldım, ancak benim gibi bir Google aramasından gelen ve doğru cevabı bulamayan herkes için. Beni yanlış anlamayın, burada iyi cevaplar var, ama aradığım şey tam olarak değil, daha fazla uzatmadan, işte yaptığım şey:

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

Snippet'i genişlet

— chebaby
kaynak

Kesinlikle harika görünümlü için Puan. :-)

— SharpC

0

Greg'in cevabını benim durumuma uyacak şekilde değiştirdim ve işe yarıyor. İşte burada:

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

— MSN Avatar Resimleri
kaynak

-4

Demek istedin

$target.hide('slow')

?

— Jeremy Morgan
kaynak

1

Evet, ama animasyondan sonra da silmem gerekiyor.

— Maske