如何用jQuery慢慢删除元素？
$target.remove()可以删除元素，但是现在我想让这个进程下来一些感觉animation，怎么做呢？
$target.hide('slow');
要么
$target.hide('slow', function(){ $target.remove(); });
运行animation，然后从DOM中删除它
target.fadeOut(300, function(){ $(this).remove();});
要么
$('#target_id').fadeOut(300, function(){ $(this).remove();});
重复： 如何“fadeOut”和“删除”在jQuery的股利？
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
如果需要隐藏然后删除元素，请使用hide方法的callback函数内的remove方法。
这应该工作
$target.hide("slow", function(){ $(this).remove(); })
所有的答案都很好，但我发现他们都缺乏专业的“波兰语”。 我想出了这个，淡出，滑动，然后删除：
$target.fadeTo(1000, 0.01, function(){ $(this).slideUp(150, function() { $(this).remove(); }); });
在调用remove方法之前，您需要使用animation。
请参阅： jQuery slideUp（）。remove（）在移除发生之前似乎不显示slideUpanimation
我已经修改格雷格的答案，以适应我的情况，它的工作原理。 这里是：
$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
我对晚会有点迟到，但是对于像我这样从谷歌search来的人，没有find正确的答案。 不要误会我的错，这里有很好的答案，但不是我正在寻找的东西，毫不费力，这就是我所做的：
$(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>
你是说喜欢
$target.hide('slow')
？
