CODEWITHSUNDEEP
jqueryhtmlcss
moey
moey

Reputation: 10887

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

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.

Upvotes: 2

Views: 467

Answers (4)

moey
moey

Reputation: 10887

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? :)

Upvotes: 0

stefanz
stefanz

Reputation: 1326

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)

Upvotes: 1

No Results Found
No Results Found

Reputation: 102735

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.

Upvotes: 4

Jivings
Jivings

Reputation: 23250

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

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

Upvotes: 1

Related Questions