如何使用 jQuery 缓慢删除元素？

$target.remove()可以删除元素，但是现在我想用一些感觉动画下来的过程，怎么做呢？

145981 次浏览
小开 
target.fadeOut(300, function(){ $(this).remove();});

或

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

复制：如何"；淡出"；&；删除"；jQuery中的一个DIV？

小开
最佳答案 
$target.hide('slow');

或

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

运行动画，然后将其从DOM中删除

小开

你是说像

$target.hide('slow')

?

小开

如果需要隐藏然后删除元素，请使用hide方法的回调函数中的remove方法。

这个应该能用

$target.hide("slow", function(){ $(this).remove(); })
小开 
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
小开

我已经修改了格雷格的答案，以适应我的情况，它的工作。这里是：

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

所有的答案都很好，但我发现它们都缺乏专业的“润色”。

我想出了这个，淡出，向上滑动，然后删除：

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

我有点晚了，但对于像我这样的人来说，通过谷歌搜索并没有找到正确的答案。不要误解我的意思，这里有很好的答案，但不完全是我想要的，没有更多的麻烦，下面是我所做的：

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


提交答案