如何使用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(); 
    }); 
});