Bug Tracker

Ticket #9310 (closed bug: wontfix)

Opened 4 years ago

Last modified 2 years ago

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

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

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

Change History

comment:1 Changed 4 years ago by timmywil

  • Owner set to pascal.naujoks@…
  • Priority changed from undecided to low
  • Status changed from new to pending
  • Component changed from unfiled to effects

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 4 years ago by pascal.naujoks@…

  • Status changed from pending to 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.

comment:3 Changed 4 years ago by pascal.naujoks@…

Hi,

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

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

comment:4 Changed 4 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:

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

comment:5 Changed 4 years ago by timmywil

  • Status changed from new to open

comment:6 Changed 4 years ago by pascal.naujoks@…

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 4 years ago by timmywil

  • Keywords needsreview needsdocs added

comment:8 Changed 3 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 3 years ago by addyosmani

  • Status changed from open to closed
  • Resolution set to wontfix

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 2 years ago by bgmort@…

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 2 years ago by bgmort@…

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 2 years ago by malavon_despana@…

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.