2

jQueryは初めてです。1つの見出し、2つのDIVS、2つのハイパーリンクを持つWebページを開発しました。私がしているのは、ユーザーが1番目のリンクをクリックすると、divのテキストが交換されることです。たとえば、1番目のdivのテキストが2番目のテキストになり、2番目のテキストが1番目のテキストになります。コードは次のとおりです。

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 に答える