Question

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.

---

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.

Answer 1

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