Question

There are times when it’s useful to hide certain HTML elements on your page by adding a CSS class, which sets display: none. Please take a look at this jsFiddle example.

<!-- HTML -->
<a id="toggle-a" href="javascript:void(0);">Hide A</a>
<p id="p-a">A</p>

/* CSS */
.hide {
  display: none;
}

/* jQuery */
$("#toggle-a").click(function() {
  $("#p-a").addClass("hide");
});

Is there a way to fade out / animate p#a when we apply .hide to it?

EDIT:
Sorry if my previous question wasn’t clear. I am interested in the following: can I trigger .fadeOut() upon a property change on the CSS level? In the example above, it is when p#a‘s display is changing from non-none to none? Note that the display property was changed to none by a different script by applying a class named hide to it.

Answer 1

This is pretty basic jQuery, fading stuff in or out. You can use fadeToggle() here:

$("#toggle-a").click(function() {
    $("#p-a").fadeToggle();
});

Demo: http://jsfiddle.net/afTdk/4/

Since only javascript can actually change the class, there’s not much point in attaching some separate listener for the class change.