Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

jquery

jquery-animate

jquery-effects

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
Sign in to Comment

Related questions

jquery firefox stopPropagation()
How do I align an inner div with the bottom of an outer div?
jQuery.ajax() sends POST requests as GET in a Chrome extension
textbox focus out
IE6 Memory Leak on Refresh?
Custom delete button in jqGrid
Dynamically added HTML elements can't be found using jQuery
selecting the first of multiple classes
Jquery binding event on selected class
What's the most efficient way to manage large datasets with Javascript/jQuery in IE?
Storing arbitrary data in HTML
Select every other 2 table rows with jquery
How to remove all tags after certain tag?
How to change the cell color of a jquery datepicker
Best practices for developing simple ASP.NET sites (built in controls or JQuery + scripts)
How to handle different screen resolution/screen size when developing a site?
jquery specific show buttons on hover
Convert DOMElement Array to jQuery Object
jQuery prevAll displaying text in backward ordering
Jquery DatePicker color Sunday red

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!