145
$target.remove() 요소를 제거 할 수 있지만 지금은 그 과정을 몇 가지 느낌의 애니메이션과 함께하고 싶습니다. 어떻게해야합니까?jQuery로 요소를 천천히 제거하는 방법은 무엇입니까?
A
답변
298
$target.hide('slow');
또는
$target.hide('slow', function(){ $target.remove(); });
$target.hide('slow')
처럼
85
target.fadeOut(300, function(){ $(this).remove();});
또는
$('#target_id').fadeOut(300, function(){ $(this).remove();});
-3
12
요소를 숨긴 다음 제거해야하는 경우 hide 메서드의 콜백 함수에서 remove 메서드를 사용합니다.
이 당신은 remove 메소드를 호출하기 전에 애니메이션을 사용할 필요가
$target.hide("slow", function(){ $(this).remove(); })
+0
+1은 위의 의견대로 답변을 얻었 기 때문에 +1했습니다. 어떻게 든'$ target '을 반복하는 대신'$ (this)'를 좋아한다. – 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
, 그것은 작동합니다
을 참조하십시오. 여기에 있습니다 :
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. html 요소를 내용에 따라 jquery로 제거하는 방법은 무엇입니까?
- 2. java.util.List에서 요소를 제거하는 방법은 무엇입니까?
- 3. UI 요소를 천천히 숨기는 방법
- 4. jquery로 css 클래스를 제거하는 방법은 무엇입니까?
- 5. jQuery로 클래스를 추가 및 제거하는 방법은 무엇입니까?
- 6. jquery로 테이블 행을 제거하는 방법은 무엇입니까?
- 7. jQuery로 DOM 요소를 대체하는 방법은 무엇입니까? 같은
- 8. Jquery로 관련 요소를 가져 오는 방법은 무엇입니까?
- 9. XML 파일에서 중복 요소를 제거하는 방법은 무엇입니까?
- 10. pyGTK에서 gtk.ListStore를 검색하고 요소를 제거하는 방법은 무엇입니까?
- 11. 레이아웃 요소를 제거하는 가장 좋은 방법은 무엇입니까
- 12. 문서 흐름에서 요소를 효과적으로 제거하는 방법은 무엇입니까?
- 13. JQuery에서 일부 DOM 요소를 제외한 모든 요소를 제거하는 방법은 무엇입니까?
- 14. jquery로 선택된 div 요소를 캡처하십시오.
- 15. 목록의 특정 요소를 제거하는 방법
- 16. 상대적으로 배치 된 요소를 jquery로 가운데에 배치하는 방법은 무엇입니까?
- 17. Jquery로 "href"를 제거하는 방법?
- 18. jQuery로 touchevent를 복제하는 방법은 무엇입니까?
- 19. 요소를 끌 때 jquery로 요소를 찾는 방법
- 20. xml에서 요소를 제거하는 XSLT
- 21. ActionScript 배열에서 모든 요소를 제거하는 가장 좋은 방법은 무엇입니까?
- 22. IE에서 하위 요소를 DOM에서 가장 빨리 제거하는 방법은 무엇입니까?
- 23. jgoodies PanelBuilder에서 추가 된 구성 요소를 제거하는 방법은 무엇입니까?
- 24. 키가 'index'와 같은 경우 PHP 배열에서 요소를 제거하는 방법은 무엇입니까?
- 25. jQuery를 사용하여 불필요한 HTML 요소를 제거하는 방법은 무엇입니까?
- 26. 동적으로 레일에 자바 스크립트가있는 html 요소를 추가하고 제거하는 방법은 무엇입니까?
- 27. 애니메이션 세트에서 참조되는 Raphael SVG 요소를 올바르게 제거하는 방법은 무엇입니까?
- 28. Google Web Tools에서 JsArray에서 요소를 제거하는 방법은 무엇입니까?
- 29. 태그 이름으로 캔버스에서 wpf 요소를 제거하는 방법은 무엇입니까?
- 30. 한 번에 일반 목록의 모든 null 요소를 제거하는 방법은 무엇입니까?
.remove() 메소드 매우 특히 DOM에서 노드를 제거합니다. .hide() 메소드는 표시 속성이 표시되지 않지만 여전히 존재한다는 표시 속성 만 변경합니다. – micahwittman
$ (this) .remove()가 더 잘 작동합니다. – Envil
@ Envil 포스터는 천천히 그것을 제거하는 방법을 물었다. .remove()는 즉시 실행합니다. – pixelearth