[javascript] 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를에 사업부에?
답변
요소를 숨기고 제거한 다음 hide 메소드의 콜백 함수 내부에서 remove 메소드를 사용하십시오.
이 작동합니다
$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();
});
});
답변
나는 파티에 조금 늦었지만 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>
답변
내 경우에 맞게 Greg의 답변을 수정했으며 작동합니다. 여기있어:
$("#note-items").children('.active').hide('slow', function(){ $("#note-items").children('.active').remove(); });