Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In jQuery, can you fadeOut() without losing the element's real estate? (invisible vs display: none)

Because I need to fadeIn() another element of the same size back in, is there a way to fadeOut() the element so that the space is kept, so that the other elements are not re-flowed for a split second and then the fadeIn() will bring back another element with the same size?

like image 846
nonopolarity Avatar asked Jun 19 '10 01:06

nonopolarity


People also ask

What is fadeOut in jQuery?

jQuery Effect fadeOut() Method The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect). Note: Hidden elements will not be displayed at all (no longer affects the layout of the page). Tip: This method is often used together with the fadeIn() method.

Which jQuery method is used to fadeIn a hidden element?

The jQuery fadeIn() method is used to fade in a hidden element. Syntax: $(selector).

What is the syntax of jQuery fadeOut () method?

jQuery - fadeOut( speed, [callback] ) Method The fadeOut( ) method fades out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.

What is fadeIn and fadeOut in jQuery?

jQuery has 2 fading methods which are . fadeIn() and . fadeOut(). The fadeIn method displays the element by fading it to opaque. The fadeOut method hides the element by fading it to transparent.


2 Answers

Two techniques come to mind:

  1. Wrap the element in a div which occupies the correct amount of space.
  2. Use the .animate method to change the opacity of the item from 100% to 0%, then, when the animation completes, swap the new element in and once again use animate to change the opacity from 0% to 100%.
like image 69
ckramer Avatar answered Oct 08 '22 22:10

ckramer


my suggestion is you wrap it with div... and put the same dimension on that div...

like image 42
Reigel Avatar answered Oct 09 '22 00:10

Reigel