Bug Tracker

Opened 12 years ago

Closed 12 years ago

Last modified 10 years ago

#9310 closed bug (wontfix)

fadeOut doesnt trigger when element is hidden anyway by a parent div

Reported by: [email protected] Owned by: [email protected]
Priority: low Milestone: 1.next
Component: effects Version: 1.6.1
Keywords: neededdocs, needsreview Cc:
Blocked by: Blocking:


Hi there,

I have a checkbox which indicates, that a div (hidden-share) is shown when the checkbox is checked. On load of the page the div is hidden because it is inside a dialog from jQuery UI. So when the checkbox is not checked the div should not be shown. But actually it is shown because, I think, the div is hidden anyway at the moment the check runs. This is the shortened code for the check:

        $('.activate-share input[type=checkbox]').change(function(){
        $('.activate-share input[type=checkbox]').trigger('change');

So I put in a callback for the fadeOut which forces the hide of the div:

        $('.activate-share input[type=checkbox]').change(function(){
                $(this).find('.hidden-share').fadeOut('fast', function(){
                    $(this).hide(); // needed because fadeOut doesn't work when element is hidden anyway?
        $('.activate-share input[type=checkbox]').trigger('change');

This worked for me but I think you should fix this with a hide() after every fadeOut.

Tested in jQuery 1.4.4 and 1.6.1 on FF and IE.

Kind Regards, Pascal

Change History (12)

comment:1 Changed 12 years ago by timmywil

Component: unfiledeffects
Owner: set to [email protected]
Priority: undecidedlow
Status: newpending

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced test case on http://jsfiddle.net that reproduces the issue experienced to help us assess your ticket.

Additionally, test against the jQuery (edge) version to ensure the issue still exists.

fadeOut will not hide an element that is already hidden, but does it need to?

comment:2 Changed 12 years ago by [email protected]

Status: pendingnew

Good morning!

I created the test case in jsfiddle here: http://jsfiddle.net/KU7ZD/2/

How to reproduce:

  1. Click on "Show Forms" to display the forms which are hidden with CSS
  2. You can see that both ".hidden-share" are shown but the first one should not because the checkbox is not checked.

comment:3 Changed 12 years ago by [email protected]


sorry I provided an old link - first time with jsfiddle ;)

Here the new link: http://jsfiddle.net/KU7ZD/4/

comment:4 Changed 12 years ago by timmywil

I see the point here, but in the interest of avoiding unnecessary DOM manipulation, we don't want to hide elements that are already hidden. This is fine for the majority of use cases and gives better performance. In a use case like you have written, I'd simply start with this:


comment:5 Changed 12 years ago by timmywil

Status: newopen

comment:6 Changed 12 years ago by [email protected]

Okay thank you for the response and I understand the jQuery point of view.

You could put a node somewhere on the fadeOut documentation to avoid future false positive tickets ;)

Thank you and keep up the good work.

comment:7 Changed 12 years ago by timmywil

Keywords: needsreview needsdocs added

comment:8 Changed 12 years ago by addyosmani

Keywords: neededdocs added; needsdocs removed

The docs for .fadeOut() have been updated to reflect the behaviour here: http://api.jquery.com/fadeOut/.

comment:9 Changed 12 years ago by addyosmani

Resolution: wontfix
Status: openclosed

As I've already updated the docs for this and we've previously discussed that hiding elements which are already hidden would require an unjustifiable amount of extra DOM manipulation I think this ticket should be closed.

comment:10 Changed 11 years ago by [email protected]

I believe this is inconsistent with the behavior of .show(), .hide(), and .fadeIn(). If i have a hidden element with a hidden parent, and I call .fadeIn() or .show() on the element, they behave the same: display: will be set to a visible value, so when I show the parent, the element will be visible. And .hide() will always set my element to display: none, even if it already ':hidden' because it has a hidden parent. So why not make fadeIn() always set an element to display: none? In my opinion this is buggy behavior, and setting display:none seems like a 'justifiable' amount of DOM manipulation to fix it.

I created this fiddle to demonstrate the bug before I found this ticket: http://jsfiddle.net/bgmort/xFmtZ/

comment:11 Changed 11 years ago by [email protected]

Just to point out another inconsistency, .fadeIn() and .slideUp() function like animated versions of .show(). they both end with display: being set to a visible value, and and they both wait the specified amount of time before firing their callback function. This is good. But .fadeOut() and .slideDown() do not behave like fadeIn() and .slideUp(). In addition to not hiding elements, as mentioned above, they do not wait to fire their callback functions when a parent is hidden.

comment:12 Changed 10 years ago by [email protected]

There are several inconsistencies due to this "feature" of avoiding' the fadeOut of :hidden elements.

And many of them involve jQueryUI components like Accordion or Tabs. The fact is that according to certain initial data (i don't care where the data comes from and neither should you since it's server side data) i would like to fadeOut a component even when the tab that component exists in is not the default visible tab.

In my case, I handle an object with a lot of data to load (like an administrative/internal use form in a banking system), and the data is distributed across many tabs (e.g. basic data, attachments, costs) instead of having a user to scroll the whole site.

(sh)It happens because the "basic data" is the first and default tab, and it is the last tab the one which holds the component that i need to fadeOut if the initial data for that component is false. And why should i need to fade out? simple: because later, i will HAVE to click that tab, and want to see that component invisible when the initial data is false... instead i see it visible.

The unnecesary DOM manipulation criteria should be left to the user, by giving an option allowing the user to fadeOut even hidden elements, e.g.:

$("f$#%ingSelector").fadeOut([duration][easing][callback][ignoreHiddenElements]) where the three parameters actually exist, and the last parameter would default to true, having the option to turn it false so user can do what many of this topic are talking about.

Note: See TracTickets for help on using tickets.