145
$target.remove() может удалить элемент, но теперь я хочу, чтобы процесс был с некоторым чувством анимации, как это сделать?Как удалить элемент медленно с помощью jQuery?
A
ответ
298
$target.hide('slow');
или
$target.hide('slow', function(){ $target.remove(); });
, чтобы запустить анимацию, а затем удалить его из DOM
85
target.fadeOut(300, function(){ $(this).remove();});
или
$('#target_id').fadeOut(300, function(){ $(this).remove();});
-3
Вы имеете в виду, как
$target.hide('slow')
?
+0
Да, но мне также нужно удалить его после анимации. – Mask
12
Если вам нужно скрыть, а затем удалить элемент, используйте метод remove внутри функции обратного вызова метода hide.
Это должно работать
$target.hide("slow", function(){ $(this).remove(); })
+0
+1 для правильного ответа, поскольку полученные комментарии получили его. Как-то мне нравится '$ (this)' вместо повторения '$ target'. – goodeye
0
Вы должны использовать анимацию перед вызовом метода удалить.
См: jQuery slideUp().remove() doesn't seem to show the slideUp animation before remove occurs
14
$('#ur_id').slideUp("slow", function() { $('#ur_id').remove();});
0
Я изменил ответ Грэга, чтобы удовлетворить мое дело, и он работает. Вот он:
$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
1
Все ответы хороши, но я обнаружил, что им не хватало профессионального «польский». Я придумал это, гаснуть, скользя вверх, то удаление:
$target.fadeTo(1000, 0.01, function(){
$(this).slideUp(150, function() {
$(this).remove();
});
});
0
я немного опоздал на вечеринку, но для тех, кто, как я, которые пришли из поиска Google и не нашел правильный ответ , Не поймите меня неправильно, есть хорошие ответы здесь, но не совсем то, что я искал, без дальнейших церемоний, вот что я сделал:
$(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>Смежные вопросы
- 1. Удалить элемент с помощью JQuery
- 2. Удалить элемент с помощью JQuery
- 3. Удалить элемент с помощью JQuery
- 4. как удалить элемент списка с помощью jquery
- 5. Как удалить элемент с помощью JQuery
- 6. Как удалить элемент, созданный с помощью jquery?
- 7. Как удалить элемент с помощью jquery?
- 8. Как удалить JQuery элемент
- 9. Удалить пустой элемент списка с помощью jquery
- 10. удалить элемент, созданный с помощью JQuery
- 11. Удалить элемент перед вставкой с помощью jquery
- 12. Удалить элемент из списка с помощью jquery
- 13. Удалить добавленный элемент с помощью jquery
- 14. Удалить элемент, созданный с помощью jQuery
- 15. Удалить элемент при нажатии с помощью JQuery
- 16. Pagination: Удалить элемент с помощью jquery?
- 17. Необходимо удалить элемент iframe с помощью jquery
- 18. Добавить/удалить элемент (ckeditor) с помощью jQuery
- 19. Удалить элемент списка с помощью JQuery
- 20. Удалить элемент из HTML с помощью jQuery
- 21. Удалить клонированный элемент с помощью JQuery
- 22. Удалить ближайший элемент Li с помощью jquery
- 23. Добавить, затем удалить элемент с помощью jQuery
- 24. Как удалить() дочерний элемент append() с помощью jQuery на странице?
- 25. Как удалить дочерний элемент без потери содержимого с помощью jquery?
- 26. Как удалить выбранный элемент из выпадающего списка (с помощью JQuery)
- 27. Как удалить элемент, сохраняющий его содержимое с помощью jQuery?
- 28. Как полностью удалить элемент canvas с помощью JQuery/JavaScript?
- 29. Как удалить один элемент изображения внутри div с помощью jquery
- 30. Как удалить элемент svg из Dom с помощью jquery?
.remove() очень специально удаляет узел из DOM. Метод .hide() изменяет только атрибут отображения, чтобы сделать не видимым, но все еще существовавшим. – micahwittman
$ (this) .remove() работает лучше. – Envil
@ Envil Плакат спросил, как его медленно удалить. .remove() делает это немедленно. – pixelearth