如何使用JQuery淡入div

Question

我是jQuery的新手。我開發了一個網頁，有1個標題，2個DIVS和2個超鏈接。 我在做什麼是當用戶點擊第一個鏈接時，div的文本被交換，例如第一個div的文本變成第二個的文本，第二個文本變成第一個的文本。下面是代碼：

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); 
    }); 
}); 

這裏是工作demo

但我想要做的是，當用戶點擊一個鏈接的div的文本應通過去，雖然褪色效果進行交換。

我希望它足夠清楚！

任何幫助將不勝感激！ :)

Answer 1

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); 
    }); 
}); 

在你的小提琴上試試這個。希望對你有效。再見。

Answer 2

你必須淡出divs。這東西，你想它沒有改變文本，但div ...

編輯：我以爲你想要切換它們。這裏是爲:)

代碼，你消失這樣的：

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

和淡入像：

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

試試這個代碼：

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