jquery - Crossfade text on click of element without it jumping down -

i trying allow user click elements on site load different text div @ bottom of page. when click image, text crossfades correctly code have both of them on page @ same time, 1 div jumps down line while other fades out. there better way doesn't jump around?

you can see working example in jsfiddle: http://jsfiddle.net/a8ymj/241/

$("a[data-toggle]").on("click", function(e) {   e.preventdefault();  // prevent navigating   var selector = $(this).data("toggle");  // corresponding element   $("div").fadeout(function(e) {      $(selector).fadein();   }); }); 

and html:

<a href="#" data-toggle="#div1">     <img src="http://192.241.203.146/assets/img/author.jpg"> </a> <a href="#" data-toggle="#div2">     <img src="http://192.241.203.146/assets/img/author.jpg"> </a>  <div id="div1">div 1</div> <div id="div2">div 2</div> 

any appreciated. still learning :)

one approach can think of setting divs absolute 1 div visible @ point of time.

div {     position:absolute; } 

check fiddle

using class