How to "fadeOut" & "remove" a div in jQuery?
JavascriptJqueryJavascript Problem Overview
I'm trying to give fadeout effect to a div & delete that div(id = "notification"), when an image is clicked.
This is how I'm doing that:
<a onclick="$("#notification").fadeOut(300,function() { $("#notification").remove(); });" class="notificationClose "><img src="close.png"/></a>
This seems to not be working. What do I need to do to fix this?
Javascript Solutions
Solution 1 - Javascript
Try this:
<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>
I think your double quotes around the onclick
were making it not work. :)
EDIT: As pointed out below, inline javascript is evil and you should probably take this out of the onclick
and move it to jQuery's click()
event handler. That is how the cool kids are doing it nowadays.
Solution 2 - Javascript
you really should try to use jQuery in a separate file, not inline. Here is what you need:
<a class="notificationClose "><img src="close.png"/></a>
And then this at the bottom of your page in <script>
tags at the very least or in a external JavaScript file.
$(".notificationClose").click(function() {
$("#notification").fadeOut("normal", function() {
$(this).remove();
});
});
Solution 3 - Javascript
If you're using it in several different places, you should turn it into a plugin.
jQuery.fn.fadeOutAndRemove = function(speed){
$(this).fadeOut(speed,function(){
$(this).remove();
})
}
And then:
// Somewhere in the program code.
$('div').fadeOutAndRemove('fast');
Solution 4 - Javascript
Have you tried this?
$("#notification").fadeOut(300, function(){
$(this).remove();
});
That is, using the current this context to target the element in the inner function and not the id. I use this pattern all the time - it should work.
Solution 5 - Javascript
if you are anything like me coming from a google search and looking to remove an html element with cool animation, then this could help you:
$(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>
Solution 6 - Javascript
.fadeOut('slow', this.remove);
Solution 7 - Javascript
Use
.fadeOut(360).delay(400).remove();