2

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

这是工作演示

但我想做的是，每当用户单击链接时，应该通过 FADE 的效果来交换 DIVS 的文本。

我希望它足够清楚！

任何帮助将不胜感激！:)

4

2 回答 2

2

你必须淡出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();
    });
});
于 2013-02-17T21:01:41.657 回答
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);
    });
});

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

于 2013-02-17T21:04:52.073 回答