如何“fadeout”;,“remove"一个div在jQuery?

我试图给一个div &淡出效果;当图片被点击时，删除那个div(id = "notification")。

我是这样做的:

<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>

这似乎没有工作。 我要怎么做才能弥补呢?< / p >

197834 次浏览
小开

你试过这个吗?

$("#notification").fadeOut(300, function(){
$(this).remove();
});

也就是说，使用当前的这上下文来定位内部函数中的元素，而不是id。我一直在用这个模式——它应该有用。

小开
最佳答案

试试这个:

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

我认为你在onclick周围的双引号使它不起作用。：）

编辑:正如下面指出的，内联javascript是邪恶的，你应该把它从onclick中拿出来，把它移到jQuery的click()事件处理程序中。这就是现在的酷孩子们的做法。

小开

你真的应该尝试在一个单独的文件中使用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');
小开

使用

.fadeOut(360).delay(400).remove();
小开

如果你像我一样，从谷歌搜索并希望删除一个具有酷动画的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);


提交答案