I would like to fadeOut() an image on the page and remove it from the DOM after the animation is finished. Sounds easy enough?
Example code (image has the id "img1"):
$("#img1").fadeOut("slow", function() { $(this).remove() });
This does does not work. When I inspect the page with Firebug the image is still there. It is just hidden.
Second example which should kind of flash the image:
$("#img1").fadeOut("slow", function() { $(this).fadeIn() });
Strange.
Both of examples work as expected for me, as demonstrated here (apologies for the bad image, it was the first thing I found!). Image 1 fades out and then is removed from the DOM, Image2 fades out then back in, in the position of where Image1 was originally positioned.
Have I understood you correctly?
P.S. You can edit the example here
jQuery supports chaining, which means you can obtain the same thing with the following commands:
$('#img1').fadeOut('slow').remove();
$('#img1').fadeOut('slow').fadeIn('slow');
It looks nicer, and it'll work =)
Its working for me. The HTML Inspector in Firebug 1.2.1 clearly shows the element being removed. Perhaps you're not using the latest JQuery?
My test code is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").click(function () {
$("p").fadeOut("slow", function()
{
$(this).remove();
});
});
});
</script>
<style>
p { font-size:150%; cursor:pointer; }
</style>
</head>
<body>
<p>
If you click on this paragraph
you'll see it just fade away.
</p>
</body>
</html>
Thanks for the example pages which work great and as expected.
The problem must be something else and only occurs in my project environment.
Side note: when I do a simple console.log($(this)) in my callback function the result is the window object itself?!
When I find out what side effects create the problem I'll update this question.
Query supports chaining, which means you can obtain the same thing with the following commands:
$('#img1').fadeOut('slow').remove(); $('#img1').fadeOut('slow').fadeIn('slow');
It looks nicer, and it'll work =)
$('#img1').fadeOut('slow').fadeIn('slow');
will work because jQuery will queue effects, but when you call
$('#img1').fadeOut('slow').remove();
framework will run fadeOut in background and acts remove() before object even begin to fade out