Question

我有两个显示和隐藏不同div的链接。 div有3个元素h2，p和img，我想分别为每个元素制作动画，但似乎无法弄清楚如何。

我想点击一个链接，让每个元素都有不同的动画进入和离开。我正在粘贴我的HTML和jQuery，希望有人可以提供帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

尝试使用：nth（）伪选择器？

＆＃13;

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

＆＃13;

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

＆＃13;

现在针对您的下一个问题，如何为动画定时，只需使用动画的完整功能即可。因此，当我的第一个动画完成时，第二个动画完成 - 但请记住，在完成的功能的上下文中，＆＃39;这个＆＃39;是指动画元素！我们将返回其父级，选择下一个孩子，并为此设置动画。

选择THIS元素的第1个第2个和第3个子元素

1 个答案: