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

Question

I have two links that show and hide different divs. The divs have 3 elements h2, p and img and I would like to animate each element separately but can't seem to figure out how.

I would like to click on a link and make each element have a different animation for entrance and leaving. I am pasting my html and jQuery here hope someone can help.

 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

try using the :nth() pseudo selector?

 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> 

Now for your next question, how to time animations, simply use the complete function of the animation. So when my first animation completes, the second runs -- but bear in mind that, in the context of the completed function, 'this' refers to the animated element! We'll go back to its parent, select the next child, and animate THAT.