如何使用JQuery淡入div

我不熟悉jQuery。我开发了一个网页，有1个标题，2个div和2个超链接。 我所做的是，当用户单击第一个链接时，div的文本被交换，例如，第一个div的文本成为第二个div的文本，第二个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>

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

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

jQuery:

  <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>

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

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

这是工作流程

但我想做的是，每当用户点击一个链接，div的文本应该通过淡入淡出的效果来交换

我希望它足够清晰

---

任何帮助都将不胜感激！：）

您必须淡出div。这件事，你想要它没有做改变的文字，但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();
    });
});

---

在你的小提琴上试试这个。希望对你有用。再见。

但是我如何将这种效果应用到我的页面中呢？只要确保如果你隐藏了一个

div

它与另一个完全相同的位置就可以了。。。你需要知道的是，fadeOut是在隐藏它，就像

style=“display:none”

我只是用了他在小提琴里的东西，所以他没有感到困惑；）我明白了一些别的事情。我以为你想切换它们而不是反转它们。。。我在那里看到了“第1页”和“第2页”，我想你想要我回答中的代码你的代码的问题是，如果你试着用小提琴，你会看到div以display结尾：没有，这看起来不太酷也许他真的想在它们之间切换，而且不知道如何解释自己，在任何情况下，这两种代码都适用于每次切换或反转。我想他还需要其他东西：）隐藏和显示div，但效果良好。就像换一页。。。