Fade Out an HTML Element That is Being "Hidden" by a CSS Class

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.

You're asking if there's a way to [`fadeOut()`](http://api.jquery.com/fadeOut/) something with jQuery? — Wesley Murch, Jan 15 '12 at 15:46
Something like this http://jsfiddle.net/afTdk/1/ or [this](http://jsfiddle.net/afTdk/2/) (`fadeIn` and `fadeOut`)? — Rob W, Jan 15 '12 at 15:48

score 4 · Accepted Answer · answered Jan 15 '12 at 15:50

4

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.

answered Jan 15 '12 at 15:50

Wesley Murch

101,186
37
194
228

Thanks for the input. @Madmartigan, is there a way in jQuery to "monitor" when there is a change in a CSS property e.g. from `display: block` to `display: none`? – moey Jan 23 '12 at 07:15
You mean to listen for a change in *any* property? I'm not sure exactly, I think you'd be better off figuring out exactly what you're trying to accomplish. For your example I think you can use `if($("element").css('display') === 'block')`. Maybe something with `getComputedStyle`. I guess you could wrap that in a `setTimeout` but it seems like a waste. – Wesley Murch Jan 23 '12 at 13:38
Yes, a listener for *any* property change. Maybe a default jQuery method or any plugin e.g. `$('#p-a').onCSSChange( /* callback */ );` which will be fired every time there is a CSS change for `p#a`, regardless who triggered the change. – moey Jan 23 '12 at 13:45
1

After thinking about this further, I think I might have been looking for something not available in jQuery right now. Hey, maybe this can be a future request for jQuery! :) – moey Jan 23 '12 at 13:48
1

Weird that your comment above got a random drive-by upvote the second you posted it? This might help: http://stackoverflow.com/questions/1397251/event-detect-when-css-property-changed-using-jquery – Wesley Murch Jan 23 '12 at 13:51
I just +1 your previous comment (after the second you added, I think), which hopefully isn't random / weird: your comment helped me a lot! Thanks! – moey Jan 23 '12 at 14:02
No I just thought it was random that some third party UV'd your prev comment the second it was posted (wasn't me). Anyways, I doubt they'd put this in jQuery core because I really don't see a general use case for it. If you can provide a real-life reason to use this, I'd consider re-posting (if the link I provided didn't help). Programmers will always try to provide the shorter, faster, easier, efficient way to get something done, and your example was too specific. – Wesley Murch Jan 23 '12 at 14:04

score 1 · Answer 2 · answered Jan 15 '12 at 15:48

1

Check out the jQuery fadeIn() and fadeOut() functions. For example:

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

answered Jan 15 '12 at 15:48

Jivings

22,834
6
60
101

score 1 · Answer 3 · answered Jan 15 '12 at 16:19

Is this what you're looking for ?

$("#toggle-a").click(function() {
    $("#p-a").animate({'marginLeft':'200px'}, function() {
       $(this).addClass('hide');
    });
});

You can read here about jquery animation and also don't forget to take a look at function called "callback" (complete parameter)

score 0 · Answer 4 · answered Jan 23 '12 at 13:57

Based on the answer by @Madmartigan, I think I was looking for something currently is not available in jQuery. There is no way for jQuery to automatically monitor any CSS changes that happen on a particular HTML element; you basically need to do it rather "manually e.g. if($("element").css('display') === 'block').

Maybe this can be a future request for jQuery? :)

Fade Out an HTML Element That is Being "Hidden" by a CSS Class

4 Answers4