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?
This question is related to
javascript
jquery
.fadeOut('slow', this.remove);
Use
.fadeOut(360).delay(400).remove();
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();
});
});
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');
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() {_x000D_
_x000D_
var $deleteButton = $('.deleteItem');_x000D_
_x000D_
$deleteButton.on('click', function(event) {_x000D_
_x000D_
event.preventDefault();_x000D_
_x000D_
var $button = $(this);_x000D_
_x000D_
if(confirm('Are you sure about this ?')) {_x000D_
_x000D_
var $item = $button.closest('tr.item');_x000D_
_x000D_
$item.addClass('removed-item')_x000D_
_x000D_
.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {_x000D_
_x000D_
$(this).remove();_x000D_
});_x000D_
}_x000D_
_x000D_
});_x000D_
_x000D_
});/**_x000D_
* Credit to Sara Soueidan_x000D_
* @link https://github.com/SaraSoueidan/creative-list-effects/blob/master/css/styles-3.css_x000D_
*/_x000D_
_x000D_
.removed-item {_x000D_
-webkit-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);_x000D_
-o-animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29);_x000D_
animation: removed-item-animation .8s cubic-bezier(.65,-0.02,.72,.29)_x000D_
}_x000D_
_x000D_
@keyframes removed-item-animation {_x000D_
0% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(0);_x000D_
-ms-transform: translateX(0);_x000D_
-o-transform: translateX(0);_x000D_
transform: translateX(0)_x000D_
}_x000D_
_x000D_
30% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(50px);_x000D_
-ms-transform: translateX(50px);_x000D_
-o-transform: translateX(50px);_x000D_
transform: translateX(50px)_x000D_
}_x000D_
_x000D_
80% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(-800px);_x000D_
-ms-transform: translateX(-800px);_x000D_
-o-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
_x000D_
100% {_x000D_
opacity: 0;_x000D_
-webkit-transform: translateX(-800px);_x000D_
-ms-transform: translateX(-800px);_x000D_
-o-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
}_x000D_
_x000D_
@-webkit-keyframes removed-item-animation {_x000D_
0% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(0);_x000D_
transform: translateX(0)_x000D_
}_x000D_
_x000D_
30% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(50px);_x000D_
transform: translateX(50px)_x000D_
}_x000D_
_x000D_
80% {_x000D_
opacity: 1;_x000D_
-webkit-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
_x000D_
100% {_x000D_
opacity: 0;_x000D_
-webkit-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
}_x000D_
_x000D_
@-o-keyframes removed-item-animation {_x000D_
0% {_x000D_
opacity: 1;_x000D_
-o-transform: translateX(0);_x000D_
transform: translateX(0)_x000D_
}_x000D_
_x000D_
30% {_x000D_
opacity: 1;_x000D_
-o-transform: translateX(50px);_x000D_
transform: translateX(50px)_x000D_
}_x000D_
_x000D_
80% {_x000D_
opacity: 1;_x000D_
-o-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
_x000D_
100% {_x000D_
opacity: 0;_x000D_
-o-transform: translateX(-800px);_x000D_
transform: translateX(-800px)_x000D_
}_x000D_
}<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width">_x000D_
<title>JS Bin</title>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<table class="table table-striped table-bordered table-hover">_x000D_
<thead>_x000D_
<tr>_x000D_
<th>id</th>_x000D_
<th>firstname</th>_x000D_
<th>lastname</th>_x000D_
<th>@twitter</th>_x000D_
<th>action</th>_x000D_
</tr>_x000D_
</thead>_x000D_
<tbody>_x000D_
_x000D_
<tr class="item">_x000D_
<td>1</td>_x000D_
<td>Nour-Eddine</td>_x000D_
<td>ECH-CHEBABY</td>_x000D_
<th>@__chebaby</th>_x000D_
<td><button class="btn btn-danger deleteItem">Delete</button></td>_x000D_
</tr>_x000D_
_x000D_
<tr class="item">_x000D_
<td>2</td>_x000D_
<td>John</td>_x000D_
<td>Doe</td>_x000D_
<th>@johndoe</th>_x000D_
<td><button class="btn btn-danger deleteItem">Delete</button></td>_x000D_
</tr>_x000D_
_x000D_
<tr class="item">_x000D_
<td>3</td>_x000D_
<td>Jane</td>_x000D_
<td>Doe</td>_x000D_
<th>@janedoe</th>_x000D_
<td><button class="btn btn-danger deleteItem">Delete</button></td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>_x000D_
_x000D_
<script src="https://code.jquery.com/jquery.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />_x000D_
_x000D_
_x000D_
</body>_x000D_
</html>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.
Source: Stackoverflow.com