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

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'指的是动画元素！ 我们将返回其父级，选择下一个孩子，然后设置动画。