반응형
jQuery를 사용하여 요소를 천천히 제거하는 방법은 무엇입니까?
$target.remove()요소를 제거할 수 있지만, 지금은 느낌 애니메이션으로 프로세스를 중단하고 싶은데 어떻게 해야 할까요?
$target.hide('slow');
또는
$target.hide('slow', function(){ $target.remove(); });
애니메이션을 실행한 다음 DOM에서 제거합니다.
target.fadeOut(300, function(){ $(this).remove();});
또는
$('#target_id').fadeOut(300, function(){ $(this).remove();});
중복:jQuery에서 디브를 "페이드 아웃"하고 "제거"하는 방법은 무엇입니까?
요소를 숨긴 다음 제거해야 하는 경우 메서드의 콜백 함수 내에서 제거 메서드를 사용합니다.
이것은 효과가 있을 것입니다.
$target.hide("slow", function(){ $(this).remove(); })
$('#ur_id').slideUp("slow", function() { $('#ur_id').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>제 경우에 맞게 그렉의 답변을 수정했고, 효과가 있습니다.여기 있습니다.
$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });
당신 말은 다음과 같습니다.
$target.hide('slow')
?
언급URL : https://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery
반응형
'programing' 카테고리의 다른 글
| git를 사용하여 마스터와 브랜치를 최신 상태로 유지하려면 어떻게 해야 합니까? (0) | 2023.08.21 |
|---|---|
| nginx의 캐시를 지우는 방법은 무엇입니까? (0) | 2023.08.21 |
| Android에서 런타임에 dp 또는 dip 측면에서 화면 너비를 결정하는 방법은 무엇입니까? (0) | 2023.08.21 |
| Oracle의 Oracle BulkCopy 클래스입니다.ManagedDataAccess.dll? (0) | 2023.08.21 |
| PhoneGap 및 jQuery를 사용하는 도메인 간 요청이 작동하지 않음 (0) | 2023.08.21 |