Fadeout and Fadein into the same space

Question

I want to fade out #lg-image and fade in #column-left and #column-right into the same space as #lg-image was. Is this possible?

Thank you

Answer 1

Give that #lg-image and #column-left and #column-right look a lot like CSS ID selectors I assume you're talking about HTML/CSS with a side of JavaScript.

Also given that you're referring to your HTML elements with CSS selector syntax, you're on your way to being able to use jQuery to get the job done. jQuery offers fadein() and fadeOut() functions.

There's an example on the fadein() page I linked to which demos fading something out and fading something else in the same place. What you're looking for is not so much JavaScript at that point though as the CSS which allows the two elements to occupy the same space onscreen. Take note that the CSS in the example contains a position:absolute; CSS property targeted to the <div> element, and the CSS rule targeting <p> specifies position:relative;. These are the real magic and to really get it you'll need to read some about CSS positioning.

Answer 2

ok, no jquery needed for this!

look the example:

DEMO: http://jsbin.com/aguhu/4

SOURCE CODE: http://jsbin.com/aguhu/4/edit

let me know!