CODEWITHSUNDEEP
jquery
Hoa
Hoa

Reputation: 20438

How can I do a jQuery fadeOut without affecting the positioning of the other elements?

At the moment if I do something like

$.('#myelem').fadeOut();

It will successfully fade out the element but then reposition everything else on the screen. How can I do a fade out whilst keeping all the other elements in the same place?

Upvotes: 0

Views: 905

Answers (3)

elclanrs
elclanrs

Reputation: 94101

Use the fadeTo() method instead which animates the opacity:

$el.fadeTo('fast', 0)

Upvotes: 0

adeneo
adeneo

Reputation: 318222

$.('#myelem').animate({opacity : 0}, 600);

From jQuery:

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.

Just animating the opacity to zero will not make it display:none, and will keep the element in the document flow so as not to affect other elements the same way as setting display:none will.

Upvotes: 0

McGarnagle
McGarnagle

Reputation: 102753

Instead of using fadeOut, try animate:

$("#myelem").animate({"opacity": 0});

If you look at the JQuery source, you will notice that fadeOut actually animates to "opacity: hide". Using the straight animate function leaves the element displayed, just invisible.

Upvotes: 3

Related Questions