Selecting a child tag of a class in jquery

Question

I've search the jquery site for this ...and I just can't find it.

I'm trying to select <p> tags in a .desc class...

<div class = "desc">
   <p>blahwhatever</p>
</div>

I'm trying make sure <p></p> does not display till my animation of .desc is done...

$(".desc p").hide();
//animation here...
$(".desc p").delay(500).show();  

This hasn't worked yet... any suggestions? (Sorry for the trivial question..)

Answer 1

To get things working as you would want add the show into the animate() methods callback try this:

$(".desc p").hide(); 

$('#animationSelector').animate(
    { /* animation settings */},
    5000, 
    function() {
        $(".desc p").show(); 
    }
);

---

working example: http://jsfiddle.net/X3qkH/

Answer 2

The simple solution here is, to pass a value (0 is absolutly fine) into .show().

$(".desc p").delay(500).show(0);

This makes sure, that it's added to the fx queue and therefore, .delay() will take effect.

Demo: http://jsfiddle.net/MuZMa/1/

Without the value, .show() will just trigger a display: block immediately.