如何“fadeout”和“删除”jQuery中的div？
我试图给淡出效果的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是邪恶的，你应该把它从onclick并将其移动到jQuery的click()事件处理程序。 这就是现在很酷的孩子们正在做的事情。
你真的应该尝试在单独的文件中使用jQuery，而不是内联。 这是你需要的东西：
<a class="notificationClose "><img src="close.png"/></a>
然后在页面底部至less在<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。 我总是使用这种模式 – 它应该工作。
如果你像我一样从谷歌search，并希望删除一个很酷的animationhtml元素，那么这可以帮助你：
$(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 { -webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29); -o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29); animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29) } @keyframes removed-item-animation { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0) } 30% { opacity: 1; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px) } 80% { opacity: 1; -webkit-transform: translateX(-800px); -ms-transform: translateX(-800px); -o-transform: translateX(-800px); transform: translateX(-800px) } 100% { opacity: 0; -webkit-transform: translateX(-800px); -ms-transform: translateX(-800px); -o-transform: translateX(-800px); transform: translateX(-800px) } } @-webkit-keyframes removed-item-animation { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 30% { opacity: 1; -webkit-transform: translateX(50px); transform: translateX(50px) } 80% { opacity: 1; -webkit-transform: translateX(-800px); transform: translateX(-800px) } 100% { opacity: 0; -webkit-transform: translateX(-800px); transform: translateX(-800px) } } @-o-keyframes removed-item-animation { 0% { opacity: 1; -o-transform: translateX(0); transform: translateX(0) } 30% { opacity: 1; -o-transform: translateX(50px); transform: translateX(50px) } 80% { opacity: 1; -o-transform: translateX(-800px); transform: translateX(-800px) } 100% { opacity: 0; -o-transform: translateX(-800px); 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(360).delay(400).remove();
