3 DIV's transition

kiwis80

Without using jQuery.

I have 3 DIVs. two hidden when using display or collapse when using visibility and one showing.

Via JS I want to display one and hide the other two. Easy.

But how can I make one fade out and the other fade in? make it look like a smooth transition

VITSUSA

kiwis80 Can you please share the reference link to understand the exact requirement?

Sempervivum

You can animate opacity by CSS transition:
https://developer.mozilla.org/en-US/docs/Web/CSS/transition

kiwis80

Tried that, but the DIV's all hold their place. So when the 3rd is shown it's "down the page" a lot because the 2 previous ones wit opacity set to 0 still hold their place on the page.

Or is there a way to overcome that?

Sempervivum

I suspect that you intend to implement a cross fade effect, i. e. the div's take the same place and when the opacity changes one is being hidden and the other becomes visible? In this case you need to place one div by absolute positioning above the other.
Demo:
https://jsfiddle.net/Sempervivum/dcrzt6bu/
Feel free to modify it that way that the fading is controlling by javascript instead of CSS hover.