#9310 closed bug (wontfix)

Opened May 17, 2011 08:12AM UTC

Closed July 12, 2011 08:15PM UTC

Last modified November 02, 2012 01:26PM UTC

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

Reported by:	pascal.naujoks@pixabit.de	Owned by:	pascal.naujoks@pixabit.de
Priority:	low	Milestone:	1.next
Component:	effects	Version:	1.6.1
Keywords:	neededdocs, needsreview	Cc:
Blocked by:		Blocking:

Description

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(){
            if($(this).is(':checked')){
                $(this).find('.hidden-share').fadeIn();    
            }else{
                $(this).find('.hidden-share').fadeOut();    
            }
        });
        $('.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(){
            if($(this).is(':checked')){
                $(this).find('.hidden-share').fadeIn();    
            }else{
                $(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

Attachments (0)

Change History (12)

Changed May 17, 2011 02:18PM UTC by timmywil comment:1

component:	unfiled → effects
owner:	→ pascal.naujoks@pixabit.de
priority:	undecided → low
status:	new → pending

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?

Changed May 19, 2011 08:37AM UTC by pascal.naujoks@pixabit.de comment:2

status:	pending → new

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.

Changed May 19, 2011 08:38AM UTC by pascal.naujoks@pixabit.de comment:3

Hi,

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

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

Changed May 19, 2011 02:40PM UTC by timmywil comment:4

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:

http://jsfiddle.net/timmywil/KU7ZD/9/

Changed May 19, 2011 02:40PM UTC by timmywil comment:5

status:	new → open

Changed May 20, 2011 08:28AM UTC by pascal.naujoks@pixabit.de comment:6

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.

Changed May 20, 2011 02:35PM UTC by timmywil comment:7

keywords:	→ needsreview needsdocs

Changed June 20, 2011 06:51AM UTC by addyosmani comment:8

keywords:	needsreview needsdocs → neededdocs, needsreview

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

Changed July 12, 2011 08:15PM UTC by addyosmani comment:9

resolution:	→ wontfix
status:	open → closed

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.

Changed July 13, 2012 05:49PM UTC by bgmort@gmail.com comment:10

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/

Changed July 13, 2012 06:08PM UTC by bgmort@gmail.com comment:11

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.

Changed November 02, 2012 01:26PM UTC by malavon_despana@hotmail.com comment:12

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.

Side navigation