Edit in JSFiddle

$(document).ready(function(){
  $("#link1").click(function(){
     $('#content1').fadeIn('slow');
     $('#content2').fadeOut('slow');
  });
  $("#link2").click(function(){
     $('#content1').fadeOut('slow');
     $('#content2').fadeIn('slow');
  });
});
<a id="link1" href="#">Link 1</a>
<a id="link2" href="#">Link 2</a>

<div class="content-container">
    <div id="content1">
        Happy days are here again
    </div>
    <div id="content2">
        Wow the link changed so effortlessly
    </div>
</div>
	
#content1, #content2
{
display:none;
}
.content-container {
    position: relative;
    width: 420px;
    height: 400px;
}
.content-container div {
    position: absolute;
    top: 20%;
    left: 50%;
    right: 0;
    bottom: 0;    
}