選擇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'指的是動畫元素！ 我們將返回其父級，選擇下一個孩子，然后設置動畫。