The .fadeOut() method to use visibility property instead of display property

Question

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page and same is for fadeIn().

My Question is can they use visibility property so they the element occupy the space in layout of the page and is not just visible?

score 36 · Accepted Answer · edited Apr 23 '20 at 23:30

36

Use jQuery's fadeTo() and then have a callback set the visibility. Example:

$('#fade').on("click", function(){
    $(this).fadeTo(500, 0, function(){
        $(this).css("visibility", "hidden")
    }) // duration, opacity, callback
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<a href="#" id="fade">Click to Fade</a>
<div>This won't move</div>

edited Apr 23 '20 at 23:30

Joseph Sible-Reinstate Monica

45,431
5
48
98

answered Aug 29 '12 at 05:26

methodofaction

70,885
21
151
164

that will not cause element visibility hidden and element still be clickable :( – GajendraSinghParihar Aug 29 '12 at 05:30
Just add a callback that adds the property on fade complete. Answer updated. – methodofaction Aug 29 '12 at 05:34
this is what I am doing with fadeOut() See http://jsfiddle.net/gajjuthechamp/BTGeR/1/ but I need a better solution – GajendraSinghParihar Aug 29 '12 at 05:46
You are asking for a way to fade out and then set visibility hidden. This is as simple as it gets without writing a custom jQuery plugin. – methodofaction Aug 29 '12 at 05:53
OK this means this is the simplest way we can have no other way then calling Call Back Function and doing something to overwrite css ? – GajendraSinghParihar Aug 29 '12 at 06:05
you should also blank the opacity attribute on the callback because on your solution changing the visibility to visible won't make the element to show cause its opacity will still be 0 – Ghetolay May 30 '14 at 13:52
1

Wouldn't it be better to add aria-hidden attribute as well? Make the callback: `$('selector').css("visibility", "hidden").attr( 'aria-hidden', true );` – JPollock Sep 05 '16 at 20:24

score 8 · Answer 2 · edited May 23 '17 at 11:55

8

animate with css opacity seems to achieve a similar effect.

$('#element').animate({opacity: 0}, 1000);

Run the same with opacity: 1 to fade back in.

Credit.

edited May 23 '17 at 11:55

Community

1
1

answered Apr 21 '14 at 22:42

yuvilio

3,795
32
35

2

This solution is simple and elegant for certain use-cases, but it bears mention that an element with zero opacity still responds to events (click, key-press, etc.) and participates in the tab-order. The caveat with this strategy is that it has accessibility implications. See: http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden – Ben Johnson Nov 05 '15 at 20:50

score 6 · Answer 3 · answered Sep 17 '12 at 12:21

6

Just Overwrite the property in the call back

$('Element').on("click", function() {
    $(this).fadeOut(500, function() {
        $(this).css({"display": "block","visibility": "hidden"});  // <-- Style Overwrite 
    }); 
})

answered Sep 17 '12 at 12:21

Gajendra Singh Parihar

61
2

The .fadeOut() method to use visibility property instead of display property

3 Answers3

Linked

Related