javascript - How to "fadeOut" & "remove" a div in jQuery?

Question

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?

Answer 1

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.