How to fade a div using JQuery

Question

I am new to jQuery. I developed a webpage that have 1 heading, 2 DIVS and 2 hyperlinks. What am I doing is that when the user clicks on the 1st link, the texts of the divs are exchanged e.g the text of 1st div becomes the text of the 2nd and the text of 2nd becomes the text of the 1st. Here is the code:

HTML5:

  <h1 style="text-align: center;">Div Content Changer</h1>
  <div id="content-wrapper">
     <div id="contentarea-1">
        <wbr><p>Donizzle posuere auctor maurizzle. Phasellizzle uhuh ... yih! elizzle izzle bow wow wow that's the shizzle tincidunt. Sheezy shizznit own yo'. Vestibulizzle izzle lacizzle maurizzle elementizzle tristique. Nunc ghetto i'm in the shizzle sheezy amet erizzle ultricizzle porta. In velizzle boom shackalack, ultricizzle at, hendrerit bling bling, adipiscing quis, shiz. Etiam velizzle daahng dawg, aliquam consequizzle, pharetra shizzle my nizzle crocodizzle, dictizzle shut the shizzle up, turpizzle. Yo neque. Cras lorizzle. For sure vitae erat izzle libero commodo check out this. Fusce rizzle augue eu nibh ullamcorper mattizzle. Phasellizzle fermentum sapien nizzle fo shizzle. Suspendisse mofo that's the shizzle, fo shizzle sizzle, mattis shizznit, hizzle nec, justo. Donizzle ma nizzle porttitor ligula. Brizzle feugizzle, tellizzle i saw beyonces tizzles and my pizzle went crizzle ornare tempor, da bomb metizzle break yo neck, yall i saw beyonces tizzles and my pizzle went crizzle, egizzle dapibus pede yo mamma dope check out this. Phasellus quam leo, dawg id, tempus izzle, boofron ma nizzle, sapien. Ut i'm in the shizzle magna vizzle ipsizzle. Sizzle ante nibh, suscipizzle vitae, vestibulizzle check out this, brizzle, velizzle. Mauris fizzle tellivizzle. Sizzle fizzle own yo' fo shizzle amet risizzle iaculizzle crazy.</p></wbr>
     </div>
     <div id="contentarea-2">
        <wbr><p>In sagittizzle leo non nisi. Fo shizzle rhoncus, owned shit malesuada facilisizzle, fizzle nulla ghetto phat, gangster auctizzle nulla felizzle dizzle. Suspendisse volutpat izzle shiz. Ass egestizzle lectus crazy sure. Prizzle consectetuer its fo rizzle break it down. Etizzle bow wow wow, dizzle sizzle amet nizzle owned, nizzle sizzle ultrices sizzle, izzle vestibulizzle my shizz fo shizzle sizzle amizzle sizzle. Maecenizzle hendrerit tortizzle brizzle bling bling. Phasellizzle lobortizzle. Gizzle we gonna chung lacus, you son of a bizzle nec, aliquizzle sit amet, da bomb egestas, augue. Fo gangster. Vestibulizzle ipsizzle pizzle in da bomb ma nizzle luctizzle i'm in the shizzle nizzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle its fo rizzle Curae; Ass eu you son of a bizzle eu enim mammasay mammasa mamma oo sa break it down. Fusce est tortizzle, shit dizzle, semper doggy, commodo izzle, nisi. Crackalackin feugizzle, fo shizzle egizzle vehicula crunk, mammasay mammasa mamma oo sa justo izzle lorem, izzle shit mi shizzlin dizzle vitae erizzle.</p></wbr>
     </div>
     <div id="clear"></div>
  </div>
  <nav>
     <ul>
        <li><a href="#1" id="pg1">Page 1</a></li>
        <li><a href="#2" id="pg2">Page 2</a></li>
     </ul>
  </nav>

CSS3:

 #content-wrapper{
    margin-left: 150px;
 }
 #contentarea-1{
    width: 450px;
    float: left;
 }

 #contentarea-2{
    width: 450px;
    float: left;
    margin-left: 50px;
 }

 #clear{
    clear: both;
 }

 nav{
    text-align: center;
 }

 nav ul{
    list-style: none;
 }

 nav ul li{
    display: inline-block;
    padding: 15px;
 }

jQuery:

 $(document).ready(function() {
    txt1 = $("#contentarea-1").text();
    txt2 = $("#contentarea-2").text();
    $("#pg1").on('click', function() {
       $("#contentarea-1").text(txt2);
       $("#contentarea-2").text(txt1);
    });
    $("#pg2").on('click', function() {
       $("#contentarea-1").text(txt1);
       $("#contentarea-2").text(txt2);
    });
 });

Here is the working demo

But what I want to do is that whenever the user clicks a link the text of the DIVS should be exchanged by going though the effect of FADE.

I hope its clear enough!

Any help would be highly appreciated! :)

Answer 1

you have to fade out the divs. this thing that you want it's not done changing the text but the div...

Edited: I thought that you want to switch them. and here is the code for that :)

and you fade like this:

$("#id").fadeOut(500); //where 500 is milliseconds

and to fade in like:

$("#id").fadeIn(500);

Try this code:

$("#pg1").on('click', function() {
    $("#contentarea-1").fadeOut(500, function() {
        $("#contentarea-2").fadeIn();
    });
});
$("#pg2").on('click', function() {
    $("#contentarea-2").fadeOut(500, function() {
        $("#contentarea-1").fadeIn();
    });
});

Answer 2

txt1 = $("#contentarea-1").text();
txt2 = $("#contentarea-2").text();
$("#pg1").on('click', function() {
    $('#contentarea-2').fadeOut(500);
    $('#contentarea-1').fadeOut(500, function(){
        $("#contentarea-1").text(txt2);
        $("#contentarea-2").text(txt1);
        $('#contentarea-1').fadeIn(500);
        $('#contentarea-2').fadeIn(500);
    });
});
$("#pg2").on('click', function() {
    $('#contentarea-2').fadeOut(500);
    $('#contentarea-1').fadeOut(500, function(){
        $("#contentarea-1").text(txt1);
        $("#contentarea-2").text(txt2);
        $('#contentarea-1').fadeIn(500);
        $('#contentarea-2').fadeIn(500);
    });
});

try this on your fiddle. hope it works for you. bye.