javascript - Hiding a <div> and showing a new one in the same spot? -

lets have 2 divs, 1 hidden, other showing. when button clicked, want use jquery fade effect fade out 1 div , fade in hidden div.

so -

<div id="part1">hello</div> <div id="part2" style="display: none">hello2!</div> <button id="btn1">click here!</button>

and js -

$("#btn1").on("click", function(){     $("#part1").fadetoggle();     $("#part2").fadetoggle(); });

now, works, can imagine happens first hides 1st div, shows second div, , takes second div place previous div located.

what can this? want them stay in same position (something have here http://kenwheeler.github.io/slick/ in fade demo.)

thanks!

one solution using absolute positioning on both divs relative container.

#parts-container {     position: relative; }  #part1, #part2 {     position: absolute;     left: 0;     top: 0; }

WIKI