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

jquery css fadeout
Champ picture Champ · Aug 29, 2012 · Viewed 12.9k times · Source

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?

Answer

methodofaction picture methodofaction · Aug 29, 2012

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>

Related questions

Remove row from table with fadeOut effect

I have a table that has some rows,each row has a background. There is a button that remove specified row with jQuery fadeOut, but during the operation the design doesn't good.cells background will be white. $(document).ready(function(){ $(".…

Read More
How to animate elements move with css3 transitions after hiding some element

Is it possible to animate elements move with css3 transitions after hiding some element using jQuery's .fadeOut()? I found some kind of solution here (see "It works for grids, too" section): However my case is more like this: http://jsfiddle.…

Read More
Fade in/Fade out, Fixed/Sticky Header

Okay, I know it seems like I've asked this question already, for which @adeneo had previously answered and apreciated, however I am rattling my brains because I just can't get this to work. I'm trying to make my 'fixed' positioned …

Read More