javascript - 选择此元素的第一个、第二个和第三个子元素

Question

我有两个显示和隐藏不同 div 的链接。 div 有 3 个元素 h2、p 和 img，我想分别为每个元素设置动画，但似乎不知道如何实现。

我想单击一个链接，并使每个元素具有不同的进入和离开动画。我在这里粘贴我的 html 和 jQuery 希望有人能帮忙。

function showonlyone1(thechosenone) {
  $('.uslugetxt').each(function(index) {
    if ($(this).attr("id") == thechosenone) {
      $(this).fadeTo("slow", 1);
      $(this).children().animate({
        fontSize: "50"
      }, 500)
    } else {
      $(this).fadeTo("slow", 0);
      $(this).children().animate({
        fontSize: "0"
      }, 500)
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
  <a href="javascript:showonlyone1('x1');">analitycs</a>
  <a href="javascript:showonlyone1('x2');">PPC campaigns</a>
</div>
<div class="uslugetxt" id="x1" class="x1">
  <h2 class="naslovx">GOOGLE ANALITYCS</h2>
  <p>
    There is something funny about your data? You double question
  </p>
  <img src="imgs/analitika.jpg" alt="analitika-slika">
</div>

<div class="uslugetxt" id="x2" class="x2">
  <h2 class="naslovx">DISPLAY ADVERTISING</h2>
  <p>
    Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
  </p>
  <img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>

Answer 1

尝试使用 :nth() 伪选择器？

showonlyone1 = function showonlyone1(thechosenone) {
      $('.uslugetxt').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).fadeTo( "slow", 1 );
               $(this).children(":nth(0)").animate({fontSize: "50"}, 500, function(){ $(this).parent().children(":nth(1)").animate({fontSize: "30"}, 500)
               })
          }
        else {
               $(this).fadeTo( "slow", 0 );
               $(this).children().animate({fontSize: "0"}, 500)
          }
     });
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sidebarmenu">
  <a href="javascript:showonlyone1('x1');">analitycs</a>
  <a href="javascript:showonlyone1('x2');">PPC campaigns</a>
</div>
<div class="uslugetxt" id="x1" class="x1">
  <h2 class="naslovx">GOOGLE ANALITYCS</h2>
  <p>
    There is something funny about your data? You double question
  </p>
  <img src="imgs/analitika.jpg" alt="analitika-slika">
</div>

<div class="uslugetxt" id="x2" class="x2">
  <h2 class="naslovx">DISPLAY ADVERTISING</h2>
  <p>
    Display Advertising is partially covered through content Social networks like Facebook, Twitter, MySpace, LikedIn,
  </p>
  <img src="imgs/decasocial.jpg" alt="analitika-slika">
</div>

现在对于你的下一个问题，如何为动画计时，只需使用动画的完整功能即可。因此，当我的第一个动画完成时，第二个动画就会运行 - 但请记住，在已完成的函数的上下文中，“this”指的是动画元素!我们将返回到其父级，选择下一个子级，然后为其设置动画。