반응형
jQuery에서 div를 "fadeOut" 및 "삭제"하는 방법은 무엇입니까?
이미지를 클릭하면 div에 페이드아웃 효과를 주고 해당 div(id = "알림")를 삭제하려고 합니다.
저는 이렇게 하고 있습니다.
<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>
이거 안 되는 것 같아.이 문제를 해결하려면 어떻게 해야 하나요?
이것을 시험해 보세요.
<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>
내 생각에 너의 이중 따옴표는onclick안 되게 만들었던 것 같아요.:)
편집: 아래에 지적된 바와 같이 인라인 Javascript는 악의적이므로 아마도 이 기능을 삭제해야 합니다.onclickjQuery의 이벤트 핸들러로 이동합니다.그것이 요즘 멋진 아이들이 그것을 하는 방법이다.
jQuery를 인라인이 아닌 별도의 파일로 사용해 보십시오.필요한 것은 다음과 같습니다.
<a class="notificationClose "><img src="close.png"/></a>
그리고 이 페이지 맨 아래에 있는<script>태그를 지정하거나 외부 JavaScript 파일에 태그를 지정합니다.
$(".notificationClose").click(function() {
$("#notification").fadeOut("normal", function() {
$(this).remove();
});
});
여러 곳에서 사용하는 경우 플러그인으로 전환해야 합니다.
jQuery.fn.fadeOutAndRemove = function(speed){
$(this).fadeOut(speed,function(){
$(this).remove();
})
}
그 후:
// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
이거 먹어봤어?
$("#notification").fadeOut(300, function(){
$(this).remove();
});
즉, 현재 컨텍스트를 사용하여 ID가 아닌 내부 함수의 요소를 대상으로 합니다.저는 항상 이 패턴을 사용합니다. - 작동해야 합니다.
저처럼 구글 검색에서 멋진 애니메이션으로 html 요소를 제거하고 싶다면, 이 방법이 도움이 될 것입니다.
$(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-3.css
*/
.removed-item {
animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)
}
@keyframes removed-item-animation {
0% {
opacity: 1;
transform: translateX(0)
}
30% {
opacity: 1;
transform: translateX(50px)
}
80% {
opacity: 1;
transform: translateX(-800px)
}
100% {
opacity: 0;
transform: translateX(-800px)
}
}
@-webkit-keyframes removed-item-animation {
0% {
opacity: 1;
transform: translateX(0)
}
30% {
opacity: 1;
-webkit-transform: translateX(50px);
transform: translateX(50px)
}
80% {
opacity: 1;
transform: translateX(-800px)
}
100% {
opacity: 0;
transform: translateX(-800px)
}
}
@-o-keyframes removed-item-animation {
0% {
opacity: 1;
transform: translateX(0)
}
30% {
opacity: 1;
transform: translateX(50px)
}
80% {
opacity: 1;
transform: translateX(-800px)
}
100% {
opacity: 0;
transform: translateX(-800px)
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</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://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</body>
</html>.fadeOut('슬로우', this.remove);
사용하다
.fadeOut(360).delay(400).remove();
언급URL : https://stackoverflow.com/questions/553402/how-to-fadeout-remove-a-div-in-jquery
반응형
'source' 카테고리의 다른 글
| 가능한 모든 패키지를 업데이트하시겠습니까? (0) | 2022.09.08 |
|---|---|
| Java "? null을 확인하는 연산자 - 뭐죠? (Ternary가 아닙니다!) (0) | 2022.09.08 |
| 서버에서 보낸 이벤트 및 php - 서버에서 이벤트를 트리거하는 항목은 무엇입니까? (0) | 2022.09.08 |
| CSV 파일을 MySQL 테이블로 Import하는 방법 (0) | 2022.09.08 |
| 바이트 []에서 InputStream 또는 OutputStream으로 (0) | 2022.09.06 |